HTML5 Search Input Type

Since Google redefined its search engine in the late 90's, finding information through organized directory is gone away. In HTML5, you can use a normal textbox as search box by adding additional type as "search". Now your textbox will look like this:-

Syntax

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

Here is a simple demo.

Don't expect much, it does not do any search operation. Search engine, by using type as "search" the web browser might tweak it slightly to make it cuter. As you may notice here, additional blue "cross" sign visible in right side of the textbox. When you input something in the search box and click on the "cross", inserted text string will be clear and you can start to type a new string.

As of writing, only few browsers provide support for this new feature.

Browser Supports

If you want to make your textbox self explanatory, you can use additional attribute "Placeholder" by assigning meaningful text. The "placeholder", in the search textbox example, will look like this:

Syntax

<input id="mysearch2" type="search" placeholder="search"/>
Here is a simple demo.