Menu
HTML <input> Tag with 'type=search' Technically, there's not much difference between using search and text . Although, it's probably quite apparent when you would use one over the other. The search value is intended to be used for a search input field on a search form. The text value serves a more general purpose.
The <input type="search"> defines a text field for entering a search string. Note: Remember to set a name for the search field, otherwise nothing will be submitted. The most common name for search inputs is q.
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 doesn't do anything special though, where all other browsers do. The results and autosave attributes shown above are not standard.
ⓘ input type=search – search field NEW The input element with a type attribute whose value is " search " represents a one-line plain-text edit control for entering one or more search terms.
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':-
On some browsers, it also supports the "results" and "autosave" attributes which provides automatic "recent searches" functionality with the magnifier icon.
More info
Actually be very careful about assuming it does nothing. When you go to style inputs with the type search they have certain attributes that cannot be changed. Try to change the border on one and you will find it quite impossible. There are several other disallowed CSS attributes, check out this for all the details.
Also as mentioned by Jashwant there's the result attribute, though it doesn't work very well unless you also include the autosave attribute. The drop down will not work in most browsers, however, so use at your own peril.
There's browser difference in action, when you type some words then keyed ESC in input type="search" in chrome/safari the input box will get cleared. but in type="text" scenario, the words will not get cleared. So be careful choosing the type especially when u use it for autocomplete or search related feature
Bonus point: input type="search" has the ability to use the onsearch attribute (although I have noticed this does NOT work in Microsofts new Edge Browser), which eliminates the need to write a custom onkeypress=if(key=13) { function() } thing.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With