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:

1. <input type=“search” name=“search” id=“search” maxlength=“30” size=“32” />

The search input type 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. For example, in Chrome and Safari the search field looks something like this:

Clicking the small X button clears the search field, without requiring a separate Reset button.

Webkit based browsers also have the ability to show previous search terms used in a drop-down menu, and preserve that information between page loads, through the addition of the results and autosave attributes:

1. <input type=“search” name=“search” id=“search”
2. maxlength=“30” size=“32” placeholder=“search”
3. results=“5” autosave=“search_history” >

The new HTML5 tag <mark> 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.

1. <label for=“portfolio” accesskey=“p”>Your website portfolio:</label>
2. <input type=“url” name=“portfolio” id=“portfolio” maxlength=“50” size=“52” />

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 (as Firefox 4+ does), lock off or present certain keys (the iPhone presents a “.com” key to increase the user’s speed in completing the field quicker), or other actions.

eMail input

Like the URL element discussed above, the eMail input is designed to take addresses:

1. <label for=“email” accesskey=“e”>Your eMail address:</label>
2. <input type=“email” name=“email” id=“email” maxlength=“50” size=“52” />

Browsers will understand that this field is designed to take eMails and (at the very least) prompt the user to use addresses that have been previously entered under that account while using the browser. In most modern browsers, the browser actually validates data the user enters.