Three radio telescopes in a white field covered in snow, with a bare tree branch in the foreground

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 .com key to increase the user’s speed in completing the field quicker, for example), or other actions.

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.