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.

Posted on April 9, 2012 in Accessibility, HTML 5, Quick Tips, Usability

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.