Placeholder in HTML5
By Jonatan Littke. Updated 4 years, 4 months ago. 5,824 unique views.
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>
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.