HTML5 allows you to have "placeholder" text - text in a form field to give hints about what you should put there. There are a number of ways to use it incorrectly and poorly. It should never be used as the label for the field, because it disappears as soon as you click on it or tab into it. "Wait, is this the zip code field?" And it shouldn't be used for important instructions, for the same reason. "What date format did they want me to use?"
For simple forms, like a search box or a user name and passwrod login screen, you can sometimes get away with it. How confused could people get with a login screen?
Well, it seems you can even mess up a login screen, if you get a little too clever.
The login form below uses placeholder text instead of labels. The "name or email" is pretty clear. And the use of dots, just like the ones that obscure your password from prying eyes is, too. Isn't that cute?
Screenshot of login form with placeholder text being used as labels:
You click on the user name field and type in your name. A very high percentage of users then think, "Oh, look, it remembered my password!" and click on the "Sign in" button.
Screenshot of login form, where the text for the first field has disappeared after selection, but the cute dots remain:
Of course the login fails, and your help desk is swamped with people who can't figure out why their password doesn't work.
If you come up with a very clever use of the placeholder feature, be sure you have some actual users do some testing, the ones who are just there to sign in, not admire how clever you are. It's not good design if your users can't figure out how to use it correctly.
Further information on placeholder text:
- Placeholders in Form Fields Are Harmful, Nielsen Norman Group, May 11, 2014
- HTML5 specification, 4.10.5.3.10 The placeholder attribute, W3C, 28 October 2014