HTML and CSS Reference
In-Depth Information
The HTML5 placeholder attribute is used to specify instructional text when the user
is not focused in the form field:
<legend>Contact Information</legend>
<p><label>E-mail address <input type="email" name="email"
placeholder="" ></label></p>
<p><label>Web site <input type="url" name="website"
placeholder="" ></label></p>
<p><label>Telephone number <input type="tel" name="phone"
placeholder="123-123-1234" ></label></p>
<p><button type="submit">Submit</button></p>
Usability experts and user interface designers have been trying to solve the problem of
displaying unobtrusive instructional text to users in forms for a long time.
Over the past five years, placeholder text within an input field has become a standard
design pattern, and now we have a standard way of implementing this solution. When
a placeholder attribute is specified on an input element, a user agent will display the
value of the placeholder attribute in the rendered form field.
The placeholder text can then be toggled off and on, depending on which page element
has focus and whether or not there is data in the form field: when the user is focused
on the field, the placeholder text will disappear; if the user leaves the form field blank
and leaves the field, the placeholder text will reappear, as shown in Figure 3-25 .
While the placeholder attribute helps make a form more usable, its purpose is to
provide an additional hint to the user. Do not omit the label element, which properly
captions a form control.
If a user agent has not implemented support for the placeholder attribute, the attribute
will be ignored.
For a reference chart on placeholder attribute support, see Table 3-10 .
Table 3-10. Browser support for the placeholder attribute
10 Platform Preview 2
11.0+ ✓✓
See Also
To deliver a more consistent experience to both browsers that support it and those that
do not, see Recipe 3.13 .
Search WWH ::

Custom Search