Forms - HTML5 - page 56

HTML and CSS Reference

In-Depth Information

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 Mac OS displays the search field with rounded (instead of

square) corners, as shown in Figure 3-1 . Both Safari and Chrome display an icon within

the field to delete the current value, as shown in Figure 3-2 .

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 of the search input type (see Table 3-1 for a

listing of compatible browsers), load Mike Taylor's support test page at http://www

.miketaylr.com/code/input-type-attr.html . The page shows not only support for the

search attribute value, but for other attribute values for input as well.

Table 3-1. Browsers supporting the search input type

IE

Firefox

Chrome

Safari

Opera

iOS

Android

10 Platform Preview 2

4.0+

10+

4.0+

11.0+ ✓✓

If a user agent does not support the search input type, it will revert to displaying a text

input field. What is the value in having a separate input type for search, when only

some user agents will render a visually different input field? There are a few answers to

this question.

First, enabling visual styles reminiscent of an operating system 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. The

following CSS applies rounded corners to the search input field for all user agents that

support the border-radius property:

input[type="search"] {

border-radius: 10px;

}