Displaying a Search Input Field | HTML5 Tutorial pdf

Displaying a Search Input Field

Problem
You want to present a user with a search form field.
Solution
Use the input element with HTML5 type value of search.
<form>
<p><label>Search <input type="search" name="query"></label></p>
<p><button type="submit">Submit</button></p>
</form>

Discussion

The search input type displays a text input field that may visually differ from that of a regular text field, based on the stylistic conventions of the platform.
For example, Safari on MacOS displays the search field with rounded, instead of boxed, corners as shown in Figure1. Both Safari and Chrome display an icon within the field to delete the current value as shown in Figure2.

Figure1. A blank search input field in Safari 5.

Figure2: A search input field with content in Chrome 12.

Some user agents will display a plain text input field for the search input type, so support cannot be determined by visual appearance alone.

Testing Browser Support

To accurately test a browser’s support (see below Table) of the search input type, load Mike Taylor’s support test page at http://www.miketaylr.com/code/input-type-attr .html. The page shows not only support for search attribute value, but other attribute values for input as well.
If a user agent does not support the search input type, it will revert to displaying a text input field.
Table: Search input type support.

What is the value in having a separate input type for search input fields, when only some user agents will render a visually different input field? There are a few answers to this question.
First, easily enabling operating system visual styles in the browser can make for a better user experience.
Second, designating a search input field as such may help assistive devices more correctly signal users as to the purpose of the field or form.
Finally, the search input type gives us a more semantic input type value to use in our forms, and gives us a better hook for our CSS, as compared to using a class or id.
input[type="search"] {
border-radius: 10px;
}

The above CSS applies rounded corners to the search input field for all user agents that support the border-radius property.