The HTML5 placeholder attribute is not a substitute for the label element
One of the useful things in HTML5 is the placeholder
attribute that lets you specify a short hint for text input fields (textarea
elements and the text states of the input
element). In browsers that implement placeholder
according to the specification, the hint text is displayed only when the field is empty and unfocused.
This is good since it gives you an opportunity to provide the user with hints regarding what they are expected to enter in the field. What is not good is that the placeholder
attribute is often used as a substitute for the label
element. I’ve seen this in various demos of the placeholder
attribute as well as in demos for scripts that emulate the placeholder
attribute in browsers that don’t natively support it. So some developers appear to misunderstand what the placeholder
attribute is meant for and how it works.
The HTML5 description of the placeholder attribute is very clear:
The placeholder attribute should not be used as an alternative to a label.
Why not? It’s quite obvious. Since any text in the placeholder
attribute is only available to the user when the field is empty, once you’ve started entering something (or if a value is prefilled by the server), the hint is gone. Want to go back and change something? Better remember what the placeholder-faked label said before you started typing, unless you want to clear the field to see the label again. And, as I mentioned before, in some browsers just putting focus on the field is enough for the placeholder text to go away. Not knowing what you’re supposed to enter into a field is… not so good.
To avoid this problem, always use label elements to let users know what form fields are for. Let the labels be visible (if the form is extremely short, like a search form with a single text field and a submit button, hiding the label visually is normally not an issue). Then feel free to use the placeholder
attribute to supply a short, nonessential hint that complements the text in the label
element.
This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.
- Previous post: Use only what you need
- Next post: End tags, semi-colons and maintainable code