HTML5 Tutorial - Input Type : Email,URL,Phone

Input Type : Email,URL,Phone

Email, Phone number and Website url are the three most commonly used contact detail which has its unique input patterns.

Email has an @ and ending with ".com" or ".net" or ".something else", website has at least one dot in the middle and most of them ending with ".com", and phone number is just number without alphabet.

Don't be confuse, these types are not for data validation, at least not yet. You will have to use the same regular expression to do so.

Below is how it looks like, you may try to input something into each field and you will find nothing special compared to plain textbox (<input type="text"/>).

html-5.my demo

Here is how the code looks like.

<input id="email" type="email"/>
<input id="website" type="url"/>
<input id="phone" type="tel" />

However, there are differences in how touch screen based web browsers treat those field. Below is the screen capture of iPhone 4 (iOS 4.2) and HTC Desire (Android 2.2) when each of the field gets focus.

html5 input type in iphone

As you can see, the web browser will give you a number pad when you focus on phone number field (type="tel"), iphone even take it further to make input of email and web url easier, every email has an "@" sign and most of the web url ending with ".com".

On the other hand, My Android keyboard input is not as friendly as iPhone is as of writing.

html5 input type in android

In conclusion, there is no reason for you not to use these "Types" from now, for web browsers that does not regconize these new types will just treat it as plain text (<input type="text"/>). This will make your page more input friendly to mobile users and more readable by machine, this is the spirit of Semantic web.