Text Selection API: HTML5

Before HTML5 we were using select() method to select the entire text/string present in the input field. We did not have more control to specify the selection start and end points ourselves. With HTML5 text selection API’s we could specify selection start and end points.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< !DOCTYPE html>
<html>
<head>
<title>selection of Text: HTML5</title>
<script src="myScript.js"></script>
</head>
<body>
 
<label for="name">Name: </label>
 <input type="text" id="name" value="Satish, CEO Technotip.com"/>
<button onclick="txtSelect()">Select</button>
 
</body>
</html>

Here we have a input box with some pre-populated text/string inside it. We also have a button, clicking on which we invoke txtSelect() method.

JavaScript file: select() method
myScript.js

1
2
3
4
5
function txtSelect()
{
	var input = document.getElementById("name");
	    input.select();
}

We select the input field by it’s id. Then, by using select() method we select the entire text present inside the input field. This is the old school method we used to select the text even before HTML5.

JavaScript file: selectionStart property
myScript.js

1
2
3
4
5
function txtSelect()
{
	var input = document.getElementById("name");
	    input.selectionStart = 3;
}

selectionStart is a HTML5 property that sets or gets the selection start points.

JavaScript file: selectionEnd property
myScript.js

1
2
3
4
5
6
function txtSelect()
{
	var input = document.getElementById("name");
	    input.selectionStart = 3;
	    input.selectionEnd   = 15;
}

This specifies the selection start and end points. Hence selects the text between these points. selectionEnd is a HTML5 property which sets or gets the selection end point.

JavaScript file: setSelectionRange() method
myScript.js

1
2
3
4
5
function txtSelect()
{
	var input = document.getElementById("name");
	    input.setSelectionRange(3, 20);
}

setSelectionRange(start, end) is a HTML5 method that sets the selection start and end point. In above case, text is selected from the index 3 and 20.

Text Selection API: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=P9P4ZX8c31E [Watch the Video In Full Screen.]



You can also try …
JavaScript file: getting selectionStart value
myScript.js

1
2
3
4
5
6
7
function txtSelect()
{
	var input = document.getElementById("name");
	    input.setSelectionRange(3, 20);
 
            alert(input.selectionStart);
}

This output’s value 3.

JavaScript file: getting selectionStart value
myScript.js

1
2
3
4
5
6
7
function txtSelect()
{
	var input = document.getElementById("name");
	    input.selectionStart = 10;
 
            alert(input.selectionStart);
}

This output’s value 10.

Advertisements

require attribute: HTML5

Lets see how require attribute of HTML5 works.

require attribute forces the user to enter some value. But it does not validate the user input.
Example: It makes sure if the email field has some value in it but doesn’t check if the user has entered valid email address or not. It only makes sure, the required field isn’t left empty.

require-form-field-attribute-html5

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< !DOCTYPE html>
<html>
<head>
<title>required attribute: HTML5</title>
<link href="myStyle.css" rel="stylesheet"/>
</head>
<body>
 
<form>
	<label for="name">Name: </label>
	 <input type="text" name="name" required/><br />
 
	<label for="age">Age: </label>
	 <input type="text" name="age"/><br />
 
 <input type="submit"/>	 
</form>
 
</body>
</html>

Here we have 2 input fields. First input field has been made required, by using require attribute.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

require attribute: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=yEVyYQjMaMU [Watch the Video In Full Screen.]



Note:
Server side validation is also equally important. Because someone might directly pass the value via the script present in the action field of form tag – if form uses GET method to pass user data.

Also note that, IE(Internet Explorer) doesn’t support require attribute, so you can make use of Javascript or jQuery to make sure IE users are taken care of.
Related Read: Registration Form Validation: PHP + jQuery + AJAX

Form novalidate attribute: HTML5

Today let us learn about novalidate and formnovalidate attributes of HTML5 form.

form-novalidation-html5

In this video tutorial I’m taking 2 input fields and making one input field as required. Also take 2 submit buttons, with one validating the user entered data and the other one bypassing the validation rules set.

HTML file: formnovalidate
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< !DOCTYPE html>
<html>
<head>
<title>novalidation: HTML5</title>
<link href="myStyle.css" rel="stylesheet"/>
</head>
<body>
 
<form>
	<label for="name">Name: </label>
	 <input type="text" name="name" required/><br />
 
	<label for="age">Age: </label>
	 <input type="number" name="age"/><br />
 
<input type="submit" value="Submit"/>
<input type="submit" value="Save" formnovalidate/>
</form>
 
</body>
</html>

Here we are using formnovalidate attribute on submit button which has a value of Save. This button bypasses the validation rules.

HTML file: novalidate
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< !DOCTYPE html>
<html>
<head>
<title>novalidation: HTML5</title>
<link href="myStyle.css" rel="stylesheet"/>
</head>
<body>
 
<form novalidate>
	<label for="name">Name: </label>
	 <input type="text" name="name" required/><br />
 
	<label for="age">Age: </label>
	 <input type="number" name="age"/><br />
 
<input type="submit" value="Submit"/>
</form>
 
</body>
</html>

Here I’ve added novalidate attribute directly to the form tag, which bypasses any validation rules written to it or to it’s child elements/tags.

CSS file associated with this is same as present at pattern and title Attribute of Form Field: HTML5

novalidate and formnovalidate attributes of HTML5 form


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=BbU2KndW7Ho [Watch the Video In Full Screen.]



Why would we ever need novalidation for forms ?
Sometimes we enter a lengthy form and submit, but due to some validation mistakes all our entries gets erased, and the user may not have the patience to re-enter everything from beginning. He may skip it altogether. To avoid that, you can build an interface wherein user can save her data first and then can submit it after reviewing it. In such a situation we can make use of a temporary database table to store user entered information and display for review with appropriate messages to correct the wrong inputs – user can correct them and Submit.

pattern and title Attribute of Form Field: HTML5

Today lets see how we can make use of pattern attribute to validate the user input data and use title attribute to hint the user for right inputs.

pattern-title-attribute-html5-regular-expression

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< !DOCTYPE HTML>
<html>
<head>
<title>pattern and title attribute: HTML5</title>
<link href="myStyle.css" rel="Stylesheet"/>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
	<label for="name">Name: </label>
	 <input id="name" type="text" pattern="^[a-zA-Z]+$" title="Example: Satish"/><br />
 
	<label for="age">Age: </label>
	 <input id="age" type="text" pattern="^[0-9]{2}$" title="Example: 25" /><br />
 
	 <input type="submit" value="Done"/>
</form>
 
</body>
</html>

Here in the first input field, we’re restricting the input to only lower case and upper case alphabets. To the second input field, we’re restricting it to only 2 digits from 0 to 9.

CSS file
myStyle.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
label{
	width: 50px;
    float:left;
}
 
input{
	width: 200px;
}
 
form {
	padding: 5px;
	background-color: ivory;
	width: 300px;
	height: auto;
	border: 2px dotted black;
}

CSS styling to align the input fields and the labels, with background color to the form, which has a 2px black dotted border.

pattern and title Attribute of Form Field: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=TKLF0Aydcv4 [Watch the Video In Full Screen.]



Note: ^ symbol specifies the beginning and the $ symbol specifies the end of the input value.

You can share any simple/small to complex/big regular expression knowledge in the comment section below. Your time and effort is highly appreciated. Your knowledge and inputs will surely be helpful to many people around the world. Comment section is all yours 🙂

placeholder Attribute of Form Field: HTML5

Lets look at placeholder attribute of HTML5 form field.

placeholder-form-attribute-html5

Demo


Here we’re taking 3 input fields of type text, email and url respectively. For each of the input fields we add a placeholder text.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< !DOCTYPE HTML>
<html>
<head>
<title>Placeholder Attribute: HTML5</title>
<meta charset="utf-8"/>
<link href="myStyle.css" rel="stylesheet"/>
</head>
<body>
<form>
 <label for="name">Name: </label>
  <input type="text" id="name" placeholder="Satish"/> <br />
 
 <label for="email">Email: </label>
  <input type="email" id="email" placeholder="technotip.community@gmail.com"/> <br />
 
 <label for="url">URL: </label>
  <input type="url" id="url" placeholder="http://technotip.com"/> <br />
</form>
</body>
</html>

Here we have 3 input fields with their respective label tags. Note that, the input fields id must match with the label tags for attribute value. Also notice the css file attached to the html file, for aligning the input fields and the labels.

CSS file
myStyle.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
label{
	width: 50px;
        float:left;
}
 
input{
	width: 200px;
}
 
form {
	padding: 5px;
	background-color: ivory;
	width: 300px;
	height: auto;
	border: 2px dotted black;
}

Here we make the label width 50px and make it float left, making room for the input fields. We also fix the width of form to 300px.

placeholder Attribute of Form Field: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=SqJZD0OdT1g [Watch the Video In Full Screen.]



Note: These placeholder attributes are not a substitute for label tags. And it’s neither a form validator. It’s used to provide hint to the user for form entry.

Dynamic Suggested List: HTML5 + jQuery + PHP + MySQL

Today lets build a dynamic suggested list input field using HTML5, jQuery, PHP and MySQL.

Dynamic-suggested-list-html5-jquery-php-mysql

We have 55 company names in our database table – and the import file(.sql) can be downloaded at the end of this tutorial page. By using jQuery we pass user input to suggest.php file and the result is embedded into index.html file.

Related read: Suggested Entries Using datalist Element: HTML5

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< !DOCTYPE HTML>
<html>
<head>
<title>Dynamic Auto-Suggestion using datalist element: HTML5</title>
<meta charset="utf-8"/>
<script src="jQuery.js"></script>
<script src="myScript.js"></script>
</head>
<body>
 
<form>
	<input type="text" list="myCompanies" name="company" id="suggest" />
	<datalist id="myCompanies">
 
	</datalist>
</form>
 
</body>
</html>

Here we have included jQuery library file before our script myScript.js
We also have an input field of type text, with an id = suggest, name = company and list = myCompanies. And a datalist element is linked/associated with input field, by matching it’s id with the name of input field’s list attribute. The value for option tag will be filled by jQuery, using the results output by suggest.php file.

PHP file
suggest.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< ?php
 
	$db         = mysqli_connect('localhost', 'root', '', 'search');
 
	$company    = $_GET['company'];
 
	$sql        = "SELECT name FROM table1 WHERE name like '$company%' ORDER BY name";
 
	$res        = $db->query($sql);
 
	if(!$res)
		echo mysqli_error($db);
	else
		while( $row = $res->fetch_object() )
			echo "<option value='".$row->name."'>";
 
?>
</option>

Here we connect php file to database(search). Get the keyword entered by the user in the input field and form a sql query. By using query() method, we process it and finally format it the way we need it i.e., we wrap the company names inside option tag’s value attribute.

jQuery file
myScript.js

1
2
3
4
5
6
7
8
$(document).ready(function(){
	$("#suggest").keyup(function(){
		$.get("suggest.php", {company: $(this).val()}, function(data){
			$("datalist").empty();
			$("datalist").html(data);
		});
	});
});

For every keyup event on the input field we trigger jQuery method $.get() and pass the user input keys to suggest.php file and the result is collected back by the callback function and the result set is stored in a variable called data.

Now we first make sure to clear out previous data present inside datalist element i.e., we clear the previous results by removing any option tags present inside datalist element. Now we fill the datalist element with the new data/result output from suggest.php file.

Since we’re using jQuery here, page does not reload and the suggested entries looks real and spontaneous.

Here is the list of company names I’ve taken for this tutorial
3M
7-Eleven
Accenture
Acer
Adidas
Adobe systems
Amazon.com
AMD
AOL
Apache
Apple inc
Appolo group
Aricent
Ask.com
Asus
AT&T
Bank of America
BBC
BE Aerospace
BMC Software
Boeing
Bosch Brewing Company
Boston Acoustic
CA Technologies
Citrix Systems
Cognizant Technolog
Cognizant Technology Solutions
Convergys
Dell
Delphi
DHL
Divx Inc
eBay
EMC Corporation
Exelon
Facebook
Ford Motor Company
Fox Entertainment Group
GCI
GoDaddy
Goodrich Corporation
Google
Hawaiian Airlines
Hewlett-Packard
Honeywell
IBM
Intel
Johnson & Johnson
KFC
McDonalds
Microsoft
Motorola
Nvidia
Red Hat
Yahoo!

OR use



To get download link for table1.sql and all other files of this project, share this article with your friends using above buttons(Twitter, Facebook and Google+). Skeptical? Give it a try!

Dynamic Suggested List: HTML5 + jQuery + PHP + MySQL


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=YqMtE8UO-xw [Watch the Video In Full Screen.]



Note: For any older browsers which do not support datalist element or list attribute, it will simply fall back to text type input field and it doesn’t produce any error.

Suggested Entries Using datalist Element: HTML5

Lets build a simple auto suggesting form field with the help of datalist form element of HTML5.

suggest-list-entries-datalist-form-element-html5

Here I’ve taken a text input field, and with the help of datalist element and list attribute, have built a auto suggesting form field.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
< !DOCTYPE HTML>
<html>
<head>
<title>Auto Suggestion using datalist Element: HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
	<input type="text" list="myCompanies"/>
	<datalist id="myCompanies">
		<option value="Google">
		</option><option value="Apple">
		</option><option value="Oracle">
		</option><option value="Yahoo">
		</option><option value="IBM">
		</option><option value="Microsoft">
		</option><option value="Technotip">
		</option><option value="American Express">
	</option></datalist>
 
</form>
 
</body>
</html>

Here I’ve added a list attribute to the input field and named it as myCompanies. Also have taken datalist form element with an id which matches the list attribute of the input field.

Auto Suggested Entries Using list attribute: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=3ExFs-lTbKY [Watch the Video In Full Screen.]



Note: You can get the user entry by using key press event, and fetch the corresponding data from the database using PHP, jQuery and mySQL and auto suggest some form entries.
Make sure to fetch 5 to 10 entries only, as it may take more time and may overload the server if you don’t limit the no of entries you fetch from the database. And more over it looks confusing and cluttered, if you suggest too many things at once!

autocomplete Attribute of Form Field: HTML5

Today lets see how autocomplete attribute of HTML5 works.

autocomplete-html5-form

Here we take 3 input fields and individually enable and disable the autocomplete feature by specifying it’s values: ON and OFF.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< !DOCTYPE HTML>
<html>
<head>
<title>Form, autocomplete: HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
	First Name: <input type="text" name="fname" autocomplete="on"/> <br /><br />
	Second Name: <input type="text" name="lname" autocomplete="on"/><br />
	Email: <input type="text" name="email" autocomplete="off"/><br />
	<input type="submit"/>
</form>
 
</body>
</html>

Here we have 3 input fields with autocomplete turned ON for first 2 and turned off for the last.

autocomplete Attribute of Form Field: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=XNjUfwDmHGc [Watch the Video In Full Screen.]



Note:
To make autocomplete feature to work
1. Turn ON the autocomplete feature for form, in your browser.
2. Make sure to name all your input fields. Without naming, autocomplete feature may not work.
3. If not specified, tags will inherit autocomplete feature from its parent tag. If not turned OFF, browser will have autocomplete turned ON by default, once it is enabled in browser settings.

autocomplete=”off”
Turn off autocomplete to password fields, debit card, credit card, account number fields.

autofocus Attribute of Form Field: HTML5

Quick video to illustrate autofocus attribute of HTML5 form fields.

autofocus-html5-form

Here we take 3 input fields, and one field is set with autofocus attribute.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< !DOCTYPE HTML>
<html>
<head>
<title>Form, Autofocus: HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
	<input type="text" />
	<input type="text" />
	<input type="text" autofocus/>
	<button>Done</button>
</form>
 
 
</body>
</html>

In above case, the third input field gets the autofocus.

autofocus Attribute of Form Field: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=E1L5-5ZhZaE [Watch the Video In Full Screen.]



Note: You can also apply autofocus to the buttons, so that user can directly hit OK or CANCEL by pressing Enter key of their keyboard! – whichever is most desired.

HTML5 and CSS3 Video Tutorial List

Here we list all the HTML5 and CSS3 video tutorials ..all these video tutorials are 3 or 5 or 10 minutes in length and you can go through them very quickly. Learning along with me while I teach is the best way to learn. You can ask your questions/doubts in the comment section of respective tutorial page/post.

HTML5-css3-sticker-technotip

If you’re thinking of HTML7, then my advice would be to first learn HTML5 – this would surly be a basement for upcoming improvements. By learning HTML5, you’ll be ahead of your competition.

Please bookmark this page, share on social sites, let your friends know about our video tutorials – this way you’ll be helping us in our good cause of helping people!

This page will be updated with up coming HTML5 and CSS3 lessons ..stay subscribed

Enter your email address:

    Geolocation API

  1. Geolocation API – Success Handler: HTML5
  2. Geolocation API – Error Handle: HTML5
  3. Google Maps Integration: HTML5
  4. Adding Pin/Marker To Google Map: HTML5
  5. Add Popup message To Google Map Pin: HTML5
  6. Realtime Location Tracking – Google Maps: HTML5

    Canvas

  1. Canvas Basics: HTML5
  2. Draw Rectangle: HTML5 Canvas
  3. Canvas State: HTML5
  4. Canvas clearRect: HTML5
  5. Canvas Lines and Paths: HTML5
  6. Line Ending In Canvas: HTML5
  7. Line Joining In Canvas: HTML5
  8. Draw Arcs/Circle with Canvas: HTML5
  9. Bezier Curve In Canvas: HTML5
  10. Quadratic Curve In Canvas: HTML5
  11. Draw Text on Canvas: HTML5
  12. Shadow Effect on Canvas: HTML5
  13. Canvas Image Patterns: HTML5
  14. Canvas Element Pattern: HTML5
  15. Linear Gradients in Canvas: HTML5
  16. Radial Gradients in Canvas: HTML5
  17. Clipping Paths in Canvas: HTML5
  18. drawImage() in Canvas: HTML5
  19. Translate Transformation in Canvas: HTML5
  20. Scale Transformation in Canvas: HTML5
  21. Rotate Transformation in Canvas: HTML5
  22. Custom Transformation in Canvas: HTML5
  23. globalAlpha and RGBa in Canvas: HTML5
  24. Compositing Methods in Canvas: HTML5
  25. Accessing Raw Pixel Data in Canvas: HTML5
  26. Image Gallery using Canvas: HTML5
  27. Simple Animation using Canvas: HTML5

    HTML5 Web Forms

  1. Pseudo-classes for Form Element
  2. autofocus Attribute of Form Field: HTML5
  3. autocomplete Attribute of Form Field: HTML5
  4. Suggested Entries Using datalist Element: HTML5
  5. Dynamic Suggested List: HTML5 + jQuery + PHP + MySQL
  6. placeholder Attribute of Form Field: HTML5
  7. pattern and title Attribute of Form Field: HTML5
  8. require attribute: HTML5
  9. Form novalidate attribute: HTML5
  10. Text Selection API: HTML5
  11. Form Input Type – search: HTML5
  12. Email Input Type: HTML5
  13. URL Input Type: HTML5
  14. Tel Input Type: HTML5
  15. number Input Type: HTML5
  16. range Input Type: HTML5
  17. date time Input Type: HTML5
  18. color Input Type: HTML5
  19. progress Element: HTML5
  20. Download Attribute: HTML5

..more videos will be added soon, stay subscribed

Enter your email address: