HTML5 Input Placeholder Tutorial

In this tutorial we will use two input types search and image, along with the placeholder attribute to create a very simple search field.

Let’s say you are very interested in meteors. You started with a very simple website of three pages. Over the years, as your interest in the subject has grown, so has website. Before you know it, your website has over 500 pages. How do help your visitors wade through all the information in your site to find what they are looking for? Simple, you add a search function.

HTML5 now includes a new input type called “search” specifically for entering search input.

[Note: This tutorial only covers the specifics of the new <input> type “search”, which has to be used in conjunction with a script to create a functioning search feature. This tutorial does not include information on how to set up the script for the search function.]

The markup is very simple

<input type= “search” name= “search_text” />

It looks like

As you can see it is nothing special. Just an input field.

To make things more interesting we will add the image below as the search button.

To do this we will add another input with the type “image” to our html. The location of the image is given by src attribute.

<input type= “search” name= “search_text” />

<input type = “image” src= “images/button.jpg” />

Here is what the two inputs look like in the browser

Now suppose you already have a google search field on your site, which lets your users search the web. The new search field you are setting up is for your site only. You don’t want to confuse your users, and want to make sure they know that the new search field is to search for entries on your site. HTML5 makes this process easy by letting you set a placeholder text using the placeholder attribute.

If you want to let your visitors know that the search field is for your site, you can do so by placing the instruction “Search the site” in the placeholder attribute of your search input.

<input type = “search” name= “search_text” placeholder= “Search the site”  />

Here is what it looks like in the browser

The text in the placeholder attribute shows up as a grayed out text. When your user places the cursor in the search field, the text will disappear.

Here is what it looks like when you place your cursor in the search field.

In some browsers the field is highlighted. The above example is from Safari

That is it, you now have set up a simple search field.