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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | < !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]
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..
