The Current State of HTML5 Forms

The search Type

<input type=search>
<input type=search results=5 autosave=some_unique_value>

Live Demo

Firefox
3.6
Firefox
4
Safari
5
Safari Mobile
iOS 4
Chrome
6+
Opera
10.6+
IE
9
IE
10 PP2
Android
2.3
Kinda supported Supported Supported Supported Supported Supported Kinda supported Supported No support

Supported Browser Screenshots


Safari 5
Opera 11
Chrome 17 (ignore the styling of the input, the dropdown is what you get natively)

The Low Down

The search input type is used to designate the input as being used for search.

  • Support is a bit arbitrary here as the spec doesn't require any special treatment for search fields. Android is marked as no support just because it doesn't do anything special where all other browsers do.
  • The results and autosave attributes shown above are not standard.
  • Safari 5 and Chrome 6+ (on OS X) round the corners of search inputs. When a value is present, a light gray x control shows up on the right of the input which can be clicked to clear the value. These same browsers on Windows do not round the corners of the inputs. Presumably the OS X rounding is to match the look of search inputs in the operating system (Finder windows).
  • Opera (test 11.50) rounds the corners only.
  • Firefox (test up to 6 beta) and IE (tested up to 10) do not round corners.
  • WebKit's special styling prevents many CSS attributes from functioning as expected: padding, font stuff (only three allowable font-sizes), border, background... You can remove any special styling and limitations and return the look back to a regular text input with: 
    -webkit-appearance: none;
  • Falls back to a regular text input.
  • More info here, including font-size limitations.
  • Use case: combine with datalist to help users with common search terms.
  • In Chrome 17 (or possibly before, but not as early as 13), you get a dropdown menu of past searches when the field comes into focus.