Saturday, 23 June 2012

How to add Search box in HTML5 Form

The search box, despite its name, doesn't actually search for anything. All it does is to put an X on the right hand side of a text box. You click on the X and the text in the text box disappears. It's for when you make a mistake and want to start again. The search box only works in Chrome and Safari, at the time of writing. The HTML code is this:

SEARCH: <INPUT TYPE="Search">

In Safari on a windows machine, you'll see this when you type in the text box:

An HTML 5 search box

For OS X users the above box will have rounded corners. Browsers that don't support the search box are just normal text boxes without the X. So you can TYPE="Search" instead of TYPE="Text", if you like. At least your Chrome and Safari users will be happy!

No comments:

Post a Comment