HTML and CSS Reference
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
❂ 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.
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:
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.