mobile devices

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..

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.