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.

Color input

Sadly, only supported in the latest version of the Opera browser as of this writing. The idea of the color input is that it displays a color picker when selected:

The syntax for the color input demonstrates very nicely how HTML5 elements are backwards-compatible with XHTML. A typical full statement for the color input would look something like this:

1. <label for=“background” accesskey=“c” >Select background color:</label>
2. <input type=“color” name=“background” id=“background” value=“#ff0000” />

If you’ve written more than a few HTML forms you’ll know that any input type that the browser does not understand is interpreted as <input type=“text” />. That is, <input type=“blah” /> will generate a text box. So if the browser does not understand <input type=“color” />, it will default to a text input, with #ff0000 as the default value in the example above.

As a result, the user (assuming they know hexadecimal color) will be able to enter their desired hue by hand in a browser that does not understand the input. Rather cleverly, Opera uses this same value as the default color in the picker.

Once the element is supported in all browsers, this could be a great way to promote personalization of webpages: for example, allowing the user to choose the background and foreground colors of the site to suit their tastes.

1. <label for=“background” accesskey=“c” >Select background color:</label>
2. <input type=“color” name=“background” id=“background”
3. value=“#ff0000” maxlength=“11” size=“9” />

Note that adding size and maxlength makes this code technically invalid under HTML5. The other solutions with the color are to hide it if the browser does not support the input, or substitute in an equivalent control using JavaScript.