HTML5 Telelephone Input Type

HTML5 introduced new input type targated to collect a telephone number. As you know, telephone number format differs around the world. You can not guarantee any specific type of notation except for allowing only numbers and perhaps a plus symbol. If you had worked with earlier versions of HTML you would have written custom phone number validation in Javascript.

Well, now you don't need to worry about it. HTML5 makes your development life easier, in order to achieve this, you just have to add type="tel" in your input element, rest HTML5 will take care for you.

Syntax

<input id="phone" type="tel"/>

Here is a simple demo.
Enter Phone# :

As of writing, only few browsers provide support for this new feature.

Browser Supports

If you want to make your textbox self explanatory, you can use additional attribute "Placeholder" by assigning meaningful text. The "placeholder", in the phone textbox example,will looks like this:

Syntax

<input id="phone" type="tel" placeholder="Enter Valid Phone Number"/>

Here is a simple demo.
Enter Phone# :

Example

<!DOCTYPE html>
<html>
<head>
	<!-- www.techstrikers.com -->
	<meta charset="utf-8">
	<title>HTML5 Phone Example</title>
</head>
<body bgcolor="#bnde45">
<fieldset>
<legend>HTML5 Phone Type</legend>
<table>
	<tr>
		<td><form action="#">Enter Phone#: <input type="tel" name="phone" required/> <input type="submit"/></form></td></tr>
	</form></td></tr>
</table>
</fieldset>
<br/>
</body>
</html>

See Live Example

« Previous