Html5, Input Type : Search, with input attribute such as “Placeholder” or “Autofocus”
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.
| Browsers | Tweak search box? |
|---|---|
| IE 9 Beta | |
| Firefox 13 | |
| Safari 5 | ✓ |
| Chrome 8 | ✓ |
| Opera 9 |
Here is a simple demo.
Search:
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”>
<input id=”mysearch2″ type=”search” Autofocus=”search”>