HTML5 Tutorial - Input Type : Search

Input Type : Search

The information in the web is growing every single second. Since Google redefined Search in the late 90's, finding information through organized directory is dead. Today, we can spot a "search box" in almost all content rich websites, it is even popular in personal blog.

In HTML5, we can define a textbox as search box instead of a normal textbox. What you can actually do for your search box is this:-

<input id="mysearch" type="search" />

By doing so, don't expect web browser to automatically blend it with a search engine. It is almost like a normal textbox <input type="text">, but browser might tweak it slightly to make it cuter.

As of writing, only Apple Safari (tested with Safari 5) and Google Chrome (tested with Google Chrome 8) does that.

BrowsersTweak search box?
IE 10
Firefox 13
Safari 5
Chrome 8
Opera 9

Here is a simple demo.

A search box

As you may notice, there is a blue "cross" sign appears in the textbox when you input something in the search box, when you click on the "cross", your input string will be clear and you can start to type a new string.

You can add more input attribute such as "Placeholder" or "Autofocus". Below is a demo of a search box with placeholder attribute.

Here is the code behind it.

<label for="mysearch2">Enter your search string here : </label>
<input id="mysearch2" type="search" placeholder="search">