Satish | Technotip.com

range Input Type: HTML5

Browsers which support range input type know that the field is used for entering a number with in a given range.

User Interface(UI) enhancement wise, you may get a slider control to select a range of number. You can even use min, max and step attributes to provide additional control for the field – for setting the range.

HTML file
index.html

< !DOCTYPE html>
<html>
<head>
<title>range Input Type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
<script src="myScript.js"></script>
</head>
<body>
 
<form>
<label>Range(2 to 10): </label>
 <input type="range" min="2" max="10" id="get" step="0.2" onchange="fetch()"/>
 <input type="number" min="2" max="10" step="0.2" id="put" />
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have 2 input fields of type range and number respectively. Both having minimum allowed value as 2 and maximum allowed value as 10, and a step of 0.2 (fractional value). The number input field is taken for the sake of illustrating the value selected by the user using the range input field – by using(sliding) the slider.

JavaScript file
myScript.js

function fetch()
{
var get  = document.getElementById("get").value;
document.getElementById("put").value = get;
}

Here we fetch the value selected by the user using the slider and assign the value to the number input field.

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

Form Input Type – range: HTML5

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

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

Note: Browsers which do not support range input type, simply fall back to text input type. However, you need to validate the user entered data at server-side for more security. Client side validation is done mainly for the sake of creating the illustration of speed of validating the data and for a better user experience.

number Input Type: HTML5

number input type indicates that the input field is used for entering numbers.

Advantages of using number input type:
1. Browsers which support HTML5, provides useful user interface enhancement by providing up and down arrow/tickers to increment and decrement the number.
2. You get a customized keyboard which is optimized for numeric inputs on mobile devices which supports number input type.
3. Using attributes like min, max and step, you can have more control. You can specify the minimum, maximum values the field takes and also you can specify the step for incrementing and decrementing the number using arrow marks.
4. Basic validation to check if the user entered numeric value or not.

HTML file
index.html

< !DOCTYPE html>
<html>
<head>
<title>number Input Type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="no">Number: </label>
 <input name="no" type="number" value="5" min="2.0" max="10.0" step="0.2" />
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have a number input type, with minimum allowed value of 2.0 and a maximum allowed value of 10.0 and a step of 0.2 (fraction).

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

Form Input Type – number: HTML5

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

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

Note: Browsers which do not support number input type, simply fall back to text input type, so you can go ahead and implement number input type in your projects without worrying. It’s a good practice to even validate the code at server-side, since browsers can be easily tricked and wrong entries can be made using form elements.

Tel Input Type: HTML5

Lets look at tel Input Type of HTML5 forms.

In this video, I’ll show you that there are no interface changes to tel type input fields. And there are no actual behavioural changes too.

Only advantages, as for now, with tel type input fields are:
1. Screen readers pickup these tel type input fields and hint the visually challenged people that they need to enter their telephone number in the input field.
2. Mobile device browsers which are optimized to work for HTML5, will show up a customized keyboard to the user to enter telephone number rather than the regular text based keyboard.

HTML file
index.html

< !DOCTYPE html>
<html>
<head>
<title>tel Input Field: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label>Text:</label>
<input type="text"/><br />
<label>Tel:</label>
<input type="tel"/><br />
<input type="submit"/>
</form>
 
 
</body>
</html>

Here we have 2 input fields of type text and tel respectively. Both these have similar visual appearance, and behave much the same on our regular computer browsers.

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

Form Input Type – tel: HTML5

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

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

Note: tel type input fields do not validate the user input to check if she entered a telephone number or a random text. Because a telephone number has a wide range of acceptance – like including a hyphen or the number of digits in a phone number vary etc..

URL Input Type: HTML5

Lets look at URL Input Type of HTML5 forms.

In this video, we illustrate how you can implement simple URL validation using url input type.

Source Code: HTML file

index.html

<!DOCTYPE html>
<html>
<head>
<title>URL Input Type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
 <label for="uri">URL: </label>
<input type="url"/>
<input type="submit"/>
</form>
 
</body>
</html>

Simple url type input field checks for the presence of http:// followed by some domain name, dot and a valid TLD(Top Level Domain) name.

Video Tutorial: Form Input Type – url: HTML5

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

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

Note:
It doesn’t ping the entered URL to check if the URL is actually present or not. It simply checks to make sure the user entered information starts with http:// and ends with a dot followed by a valid TLD.

If viewed on a HTML5 compatible mobile browser, it pops up custom keyboard to facilitate the user to enter URL.

Email Input Type: HTML5

Lets look at email input type of HTML5 forms.

In this video, we illustrate how you can implement simple email validation using email input type.

HTML file
index.html

< !DOCTYPE html>
<html>
<head>
<title>Email input type: HTML5</title>
<link href="myStyle.css" rel="stylesheet" />
</head>
<body>
 
<form>
<label for="mail">Email: </label>
 <input type="email"/><br />
 <input type="submit"/>
</form>
 
</body>
</html>

Here we have an input field of type email. We haven’t implemented complicated JavaScript to check if the entered text actually contains a @ symbol and a valid TLD. email input type checks for all these small requirements to pass it as an email address.

Form Input Type – email: HTML5

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

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

Note:
It doesn’t validate the email address completely. Infact, it doesn’t check if the entered email address is actually a real email address or a dummy one. It simply checks for minimal thing in the entered text to determine if it is an email address or not – like @ symbol and a valid TLD(Top Level Domain) extension.

Also on mobile devices, when it encounters these email input type, user is prompted with keypad that aids in entering email address – like the @ symbol present on the same screen and need not to navigate to special symbols section on the keypad.