IMO,所有主要浏览器(包括 Safari、Chrome、Firefox 和 Opera)都没有任何区别。并且搜索字段的行为也类似于常规文本字段。那么,HTML5 中的 input type="t......" /> IMO,所有主要浏览器(包括 Safari、Chrome、Firefox 和 Opera)都没有任何区别。并且搜索字段的行为也类似于常规文本字段。那么,HTML5 中的 input type="t......"> IMO,所有主要浏览器(包括 Safari、Chrome、Firefox 和 Opera)都没有任何区别。并且搜索字段的行为也类似于常规文本字段。那么,HTML5 中的 input type="t......" />
ChatGPT解决这个技术问题 Extra ChatGPT

input type="text" vs input type="search" in HTML5

I'm new to HTML5 as begun to work with HTML5's new form input fields. When I'm working with form input fields, especially <input type="text" /> and <input type="search" /> IMO there wasn't any difference in all major browser including Safari, Chrome, Firefox and Opera. And the search field also behaves like a regular text field.

So, what is the difference between input type="text" and input type="search" in HTML5?

What is the real purpose of <input type="search" />?


N
Norguard

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"); }

+1 for two valid points, 1) internal search applet for mobile phone. 2)ability to make better presentation. However, i supposed to wait to accept the answer, because i want to make sure there isn't any other purpose:)
Right now, there isn't. The inputs are all either just names at the moment (like there is only partial support for input[type=color]), or the browsers have implemented their own special handling (like type=number or type=email or type=range). There's no other option -- it's either got a special handling by the browser, or it doesn't. Right now, in most browsers, type=search doesn't, and probably won't (except MAYBE making it look like a search box in iTunes or some other app). Currently, it's there so that YOU can add extra functionality/presentation by knowing it's a search box.
One difference is that pressing [Esc] in a search input will clear the results. Super handy if your users are using it frequently.
@JoshH that is super-handy. Any idea which browsers (and versions) that affects, currently? I'd totally be willing to update the answer and bring it up to the current(/future) state of the evergreens, given that the landscape is very different now, than it was a year and a half ago.
I wouldn't recommend using pseudo-elements on replaced elements: it's against standards, though works in some cases.
J
Jashwant

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:


H
Harsh Raj

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


This most certainly does not happen everywhere. In which environment is this observed?
"X" icon was visible in edge
R
RevanthKrishnaKumar V.

On some browsers, it also supports the "results" and "autosave" attributes which provides automatic "recent searches" functionality with the magnifier icon.

More info


Chrome 51 removed support for the results attribute: developers.google.com/web/updates/2016/08/…
R
RevanthKrishnaKumar V.

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


R
RevanthKrishnaKumar V.

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.


V
Volker E.

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.


q
qingyang yu

using input type="search" make the keybord enterkey's text show "search", which may improve user experience. however, you have to adjust the style if using this type.


S
STEEL

But it has a bad affect on yout input element, if you set

<input type="search">

And in your css you set

input {background: url("images/search_bg.gif");}

It wont showup at all.


F
Fil

It depends on the programmers point of view, a programmer can easily determine the purpose of the input by looking on the type and it's easy for CSS styling and for JavaScript or JQuery to verify rule in the inputs.