Tag: HTML5

Form Input Type – search: HTML5

HTML5 introduces many new input types, and search is one of them.

form-input-search-type-html5

In this video I’m illustrating simple interface change that search type input fields bring, compared to the usual text type input fields.

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 Input Type - search: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="srch">Search: </label>
 <input type="search" name="srch" /><br />
<label for="txt">Text: </label>
 <input type="text" name="txt"/><br />
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have 2 input fields, with type search and text respectively. This is to show a simple interface change between the two.

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

Form Input Type – search: HTML5


[youtube https://www.youtube.com/watch?v=er7nOfllI1Q]

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



Note:
If the user’s browser doesn’t yet support search type, it’ll simply fall back to text type.

Browser manufacturers may even decide to show recent query as suggested entries by default with these search type input fields. And more interface changes may be implemented.

If you’re building application with search field, make sure to implement search type input fields and get the advantages of latest updates to search type input fields.

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


[youtube https://www.youtube.com/watch?v=P9P4ZX8c31E]

YouTube Link: https://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.

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


[youtube https://www.youtube.com/watch?v=yEVyYQjMaMU]

YouTube Link: https://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


[youtube https://www.youtube.com/watch?v=BbU2KndW7Ho]

YouTube Link: https://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


[youtube https://www.youtube.com/watch?v=TKLF0Aydcv4]

YouTube Link: https://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 :-)