input type="text" vs input type="search" in HTML5
Right now, there isn't a huge deal between them - maybe there never will be. However, the point is to give the browser-makers the ability to do something special with it, if they want.
Think about <input type="number">
on cellphones, bringing up number pads, or type="email"
bringing up a special version of the keyboard, with @ and .com and the rest available.
On a cellphone, search could bring up an internal search applet, if they wanted.
On the other side, it helps current devs with css.
input[type=search]:after { content : url("magnifying-glass.gif"); }
It does absolutely nothing in most browsers. It just behaves like a text input. This isn't a problem. The spec doesn't require it to do anything special. WebKit browsers do treat it a bit differently though, primarily with styling.
A search input in WebKit by default has an inset border, rounded corners, and strict typographic control.
Also,
This isn't documented anywhere that I know of nor is it in the spec, but you if you add a results parameter on the input, WebKit will apply a little magnifying glass with a dropdown arrow showing previous results.
<input type=search results=5 name=s>
Reference
Above all, it provides a semantic meaning to the input type
.
Update:
Chrome 51 removed support for the results attribute:
Visually/functionally, 2 differences if the input type is 'search':-
- You get a 'X' symbol at the end of the input/search box to clear texts in the box
- Pressing 'Esc' key on keyboard also clears texts