Placeholder in HTML5

By Jonatan Littke. Updated 4 years, 4 months ago. 5,824 unique views.

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:

Placeholder in Firefox

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:

Placeholder with a 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

Comments (2)

Kelber: (4 years, 4 months ago)
Does this validate in XHTML 1.0?

Jonatan Littke: (4 years, 4 months ago)
No, it doesn't validate, but as far as I know, all major browsers will simply ignore the attribute without any errors.

Login or join SimpleEditions to participate.

Photos of contributors

Your expertise is needed

SimpleEditions is a tutorial community that we create to together.
We gather the experience of thousands of individuals and convert it into high quality, easy to understand tutorials.