Tip 7Providing Hints with Placeholder Text

Placeholder text provides users with instructions on how they should fill in the fields. It’s not meant to be a replacement for the <label> tag; it’s meant to give users an example.

AwesomeCo’s support site requires users to sign up for an account, and one of the biggest problems with the sign-ups is that users keep trying to use insecure passwords. Let’s use placeholder text (see the following figure) to give users a little guidance on our password requirements. For consistency’s sake, we’ll add placeholder text to the other fields too.

images/html5forms/placeholder_example.png
Figure 6. Placeholders can help users understand what you’re asking ...

Get HTML5 and CSS3, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.