If you work with HTML forms, you can use a new HTML5 attribute to populate text fields with short hints to help users complete a form. If you’re reading this in Chrome, Safari, or Firefox 4 or later, here’s what I’m talking about:
(If you’re using IE, no biggie. It’s a regular input box, but without the hint.)
The browser clears the placeholder text when you click (or tab into) the field. If you click elsewhere without entering a value, the placeholder text returns. If you submit the form without entering a value, the browser ignores the placeholder text and submits the rest of the form data.
To start adding hints to your text fields, use the new
placeholder attribute in the input element:
<input type="text" id="name" placeholder="Click me!" />
That’s it. You can use the attribute with any text input and textarea element, including input types like
Until they figure out a better way, you can style placeholder text using the following vendor-specific CSS selectors for Mozilla (Firefox 4 or later) and Webkit (Chrome, Safari):
It’s probably a good idea to stick with the basics — color, font-style, and font-variant. For more information, see “HTML5 Placeholder Styling with CSS” on David Walsh’s blog.
You’ll find more on the placeholder attribute here:
- “The placeholder attribute” in HTML5: Edition for Web Developers
- HTML5 Accessibility Chops: the placeholder attribute on the The Paciello Group blog
- “The placeholder Attribute” on The Current State of HTML5 Forms site.