OverviewLabels are captions that tell visitors what information a particular form field is asking for. Placeholders are example content or hints that provide visitors with visual cues to help them complete forms. Labels appear outside of a form field, and placeholders appear inside of a form field and disappear when visitors click or tab into the field.
Labels and placeholders serve two distinct purposes and one should not be used in place of the other; however, for sake of space and/or aesthetics, form authors are increasingly using placeholders as labels.
Yes, it’s compact, but there are consequences that come along with this practice. We’ll use this last example to demonstrate a few reasons why placeholders are not substitutes for labels.
Issues with Using Placeholders as Labels
Placeholders DisappearThis one is pretty obvious. Placeholders are supposed to disappear, but when placeholders are used as labels, visitors lose form field context when they click or tab through form fields. Suppose a visitor is briefly distracted while in the process of filling out your form and they return to the following:
If the visitor forgot what the last field was asking for, they would have to delete whatever is currently there and click or tab out of the field to get the placeholder text to reappear. Disappearing placeholder text can also affect visitors who use the tab key to advance to the next form field. If visitors don't read ahead to the next field’s placeholder before hitting the tab key, they’ll be in the same situation.