Forms - HTML5 - page 81

HTML and CSS Reference

In-Depth Information

Solution

The HTML5 placeholder attribute is used to specify instructional text when the user

is not focused in the form field:

<form>

<legend>Contact Information</legend>

<p><label>E-mail address <input type="email" name="email"

placeholder="user@domain.com" ></label></p>

<p><label>Web site <input type="url" name="website"

placeholder="http://www.domain.com/" ></label></p>

<p><label>Telephone number <input type="tel" name="phone"

placeholder="123-123-1234" ></label></p>

</fieldset>

<p><button type="submit">Submit</button></p>

</form>

Discussion

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

IE

Firefox

Chrome

Safari

Opera

iOS

Android

10 Platform Preview 2

4.0+

11.0+ ✓✓