HTML5 forms - HTML5 and CSS3 - page 60

placeholder text . Here are two examples of placeholder text on the
Firefox search bar and on the WordPress login.
This approach is popular with designers because using field names
as placeholders doesn't take up any extra space, but provides the
user with useful information about the expected input. It's also a
compact way of indicating the desired input format.
There are several common approaches to achieving this look with
JavaScript. They mostly boil down to two alternatives:
❂ Make the input transparent, and place the label element behind it.
❂ Hide the label element, but copy the text of the label into the input.
You then have to add JavaScript to remove the placeholder text when
a user clicks the control and put it back if the user leaves the control
without entering a value. But a number of issues can occur:
1 Errors in the JavaScript can stop the placeholder text from being
removed when a user clicks into the element. If users have JavaScript
disabled, the text won't work properly or at all.
2 The placeholder can interfere with browser form-fill functionality that
remembers values for frequently used forms.
3 Assistive technology has no way of distinguishing between placeholder
text and valid input.
HTML5 has support for placeholders built in thanks to the
new placeholder attribute. Add this attribute to the
<input> element with the value you want to use.