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?
Talking about “pattern” attribute in HTML, you should also mention :valid/:invalid in CSS (http://www.w3.org/TR/css3-ui/#pseudo-validity). Together they are very powerfull.
In the Syntax-box at the top of your post, shouldn’t the input-type for url be ‘url’ instead of ’email’?
Thanks for you info! I’m really looking forward to be using HTML5, especially if it works in all major browsers!
What if someone access from unsupported HTML5 browser? Will the from works?