As the new HTML5 semantic container tags are to <div>, so these new form inputs are to the generic <input type=text> element. Having specific elements for search fields, URLs, eMail address inputs and a color picker allow browsers and devices to be far more powerful and responsive.
Search element
The search element is new to HTML5:
<input type="search" name="search" id="search">The search input does not, by itself, initiate a search. What it does deliver are browser-supported features that are useful in searches: the ability to clear the field without typing or clicking a separate button.
The HTML5 <mark> element should be used to highlight search responses.
URL input
The URL input type is designed to take web addresses, such as entering your portfolio URL into a form.
<label for="portfolio">Your website portfolio:</label>
<input type="url" name="portfolio" id="portfolio">Again it is not so much about how this element looks, as to the fact that the browser now recognizes that a URL should be entered into the field. The browser could validate this information, lock off or present certain keys (iOS presents a
eMail input
Like the URL element discussed above, the eMail input is designed to take addresses:
<label for="email">Your eMail address:</label>
<input type="email" name="email" id="email">Browsers will understand that this field is designed to take eMail addresses, and will validate any data the user enters.
Photograph by Richard Fraser, used under a Creative Commons Non-Commercial No-Derivs 2.0 Generic license
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
