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
This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.
Subscribe / follow
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost