Placeholder in HTML5

With HTML5, you can let browsers give text input boxes a pre-filled value that serves as a hint for the user regarding what to type. When they start typing, the pre-filled value is replaced. You've probably seen this implemented before, but in JavaScript.

All you need is:

<input type="text" name="real_name" placeholder="Enter your first and last names">

Looks like this in Firefox 4.0:

The placeholder text will automatically be removed once a user clicks in or tabs to the input field. It will be restored if they tab out without having entered any text.

Don't replace the label attribute

The placeholder text is not meant to replace the <label> element. They serve two different purposes. The <label> should specify what to type (username, password, street address etc) whereas the placeholder attribute gives a specification on how or give examples. Like so:

<label for="subject">Subject: <input type="text" id="subject" name="subject"
placeholder="Enter a clear and descriptive subject"></label>

In Firefox:

For browsers that don't support it

This is a nice way to use HTML5 since the attribute will be ignored by browsers that don't understand it.

But if you want to make it work in other browsers, you can use some JavaScript to create the same behavior. There is an excellent jQuery plugin called HTML5 Placeholder Plugin that will go through all input fields with placeholders attached to them and make them work in all browsers.

Related reading

• How to include a jQuery plugin