Placeholder Text
The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears.
Youâve probably seen placeholder text before. For example, Mozilla Firefox 3.5 now includes placeholder text in the location bar that reads âSearch Bookmarks and Historyâ, as shown in Figure 9-1.
Figure 9-1. Placeholder text in Firefoxâs search box
When you click on (or tab to) the location bar, the placeholder text disappears (Figure 9-2).
Figure 9-2. Placeholder text disappears on focus
Ironically, Firefox 3.5 does not support adding placeholder text to your own web forms. Câest la vie. Browser support for placeholders is shown in Table 9-1.
Table 9-1. Placeholder support
IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
---|---|---|---|---|---|---|
⢠| 3.7+ | 4.0+ | 4.0+ | ⢠| ⢠| ⢠|
Hereâs how you can include placeholder text in your own web forms:
<form>
<input name="q" placeholder="Search Bookmarks and History">
<input type="submit" value="Search">
</form>
Browsers that donât support the placeholder
attribute will simply ignore it. No
harm, no foul.
Get HTML5: Up and Running now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.