Like this: <input type="search">
- You get an extra-round-y appearance in Safari, which at one time matched the macOS look for search inputs, but not really anymore. I don’t hate the look, except…
- Safari totally ignores the
font-size
you set on it, so careful about that. Unless you smash off the round-y look with-webkit-appearance: none
(I guess unprefixed going forward) — then you can, so probably 92% of all websites do this. - You get a little × icon inside the input (when it has a value) that clears it out. This is probably the best reason to use it, and mercifiully you get to keep it even after resetting the
appearance
. - You get the satisfaction of knowing that you’re using the semantically correct input type for the job, assuming you are building a thing that actually searches something.
- You get past search terms with autocomplete. Browsers store those past search terms and offer a menu for autocompleting them. I’m trying to make this a list of things that are unique to search inputs, and I can prove this happens on non-search inputs. But hey, it does make the most sense on search inputs.
- You get the pleasure of adding a role to the parent form (i.e.
<form role="search">
) because that helps assistive technology announce it as a search form. - You get to remember to add a proper
<label>
to the input. Just using a magnifying glass icon or just aplaceholder
alone won’t cut it, even though that’s what a lot of designs call for visually. - You get a super weird
incremental
attribute that sends a debouncedsearch
event to the DOM element itself. I guess that is useful for live search UX. But it’s non-standard and not in Firefox so probably don’t count on it (via Christian Shaefer). - You get to live another day as a front-end developer.
And if you don’t omit the
action
attribute on the form element – for some silly reason – you also get a “search” button on the iOS keyboard – instead of just “return”Thanks for this reminder.
I always add a
role="search"
to parent form, but have been forgetting thetype="search"
.reasons 3, 4 and 9 in your list are good enough justification for me!
You can get “Add a keyword for this Search…” when you right click it in Firefox.