Question

The title is pretty explanatory, basically I want to use a new input type in this case “search” while falling back to a type=”text” if the browser doesn’t support search.

I was guessing it could be like this:

<input type="text" type="search" name="s" placeholder="Search posts">

But I’m not sure.

How is this usually done?

Answer 1

That’s the default behavior, and how HTML5 was designed. Non-supported types will fall back to type=text.

Source: Dive into HTML5

As with all the other new input types, browsers that don’t recognize type=”search” will treat it like type=”text”, so there is absolutely no reason not to start using type=”search” for all your search boxes today.

Edit

As pointed out in the comments, you don’t need the two type attributes, just type=search:

<input type="search" name="s" placeholder="Search posts">