input type=“text” vs input type=“search” in HTML5

Question

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" />?

Answer 1

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.

Answer 2

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:

Answer 3

Visually/functionally, 2 differences if the input type is 'search':-

1. You get a 'X' symbol at the end of the input/search box to clear texts in the box
2. Pressing 'Esc' key on keyboard also clears texts

Answer 4

The majority of functionalities are the same but 1 difference we can see using browsers is that search input is a little different in SAFARI and CHROME. They add "x" icon at the right side, but it's the same thing for FireFox, IE, etc.

In short, no difference for Firefox, IE, Opera, only for safari and chrome. RAW Paste Data The majority of functionalities are the same but 1 difference we can see using browsers is that search input is a little different in SAFARI and CHROME. They add "x" icon at the right side, but it's the same thing for FireFox, IE, etc.

In short, no difference for Firefox, IE, Opera, only for safari and chrome.

Answer 5

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.