Tel Input Type: HTML5

Advertisement:

Lets look at tel Input Type of HTML5 forms.

form-input-type-tel-type-html5

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


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

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

Leave a Reply

Your email address will not be published. Required fields are marked *