HTML5’s “email” and “url” Input Types
I've already covered some subtle HTML5 improvements like placeholder, prefetching, and web storage. Today I want to introduce a few new INPUT element types: email and url. Let's take a very basic look at these new INPUT types and discuss their advantages.
The syntax is as basic as a text input; instead, you set the type to "email" or "url":
<!-- email --> <input type="email" pattern="[^ @]*@[^ @]*" value=""> <!-- url --> <input type="url" value="">
Using the new HTML5 pattern attribute, you can also provide a regular expression to validate the email and URL addresses against. I'll save those specifics for another post.
The Advantages to Using type="email" and type="url"
There are a few advantages to using these special INPUT types:
- You may easily style all email INPUT elements with input[type=email]
- You may easily style all url INPUT elements with input[type=url]
- This INPUT type could be considered more semantically correct.
- Mobile accessibility: if your user is browsing with an iPhone and they arrive at a special email input, the iPhone will display a keyboard with the @ symbol provided on the primary screen. If the INPUT is of type "url", the iPhone will display the ".com" button on the primary keyboard screen:
Input on this...Input...Type
At first I disliked the idea of using different type attribute values per field but after more thought, the accessibility and usability enhancements provided a great boost. What do you think?