Overview

Labels are captions which inform visitors what information a particular form field is asking for. Placeholders are bits of example content or hints which provide visitors with visual cues to aid in form completion. Labels appear outside of their respective form field, while placeholders appear inside of their respective form field and disappear when visitors click or tab into the field.

Label vs Placeholder

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.

Placeholder example

Yes, it’s compact and pretty, but there are many consequences that come along with this practice that many form authors do not think of when designing forms. 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 Disappear
This 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:

Placeholder example

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 re-appear.

Disappearing placeholder text can also affect visitors who prefer use the tab key to advance to the next form field. If visitors fail to read ahead to the next field’s placeholder before hitting the tab key, they’ll be in the same situation.

Pardot Auto-focus
By default, Pardot forms will focus on the first form field automatically as a convenience for visitors. This allows them to start typing immediately without having to click or tab into the first field. If placeholders are used instead of labels, and auto-focus is not disabled, a visitor would see the following:

Placeholder example

Disabled Javascript
Placeholders are not supported by Internet Explorer prior to version 10, meaning a sizable portion of web users are unable to see them by default. To get around this, form authors use javascript to create the same effect. However, if any visitors using older versions of IE have disabled javascript (for security or other reasons), they would see the following:

Placeholder example

Placeholders are (almost) Always Grey
Placeholders appear as grey text inside of a form field. Although some web browsers are starting to allow them to be styled differently, this is not yet the norm. Depending on the background color of the form field and page, there may not be enough contrast between it and the placeholder for some visitors to be able to read.

Accessibility Issues
Placeholder support is fairly inconsistent with screen readers which are used by the visually impaired to read the contents of a web site to them. Without labels, these visitors may not be able to complete the form properly.

Confusing to Some Visitors
Data suggests that some web users think that form fields with placeholders are already filled in and may skip over them.

Against the HTML Specification.
The W3C, which is the primary standards organization for the web, is very clear on the distinction between placeholders and label in the html specification:

“The placeholder attribute represents a short hint intended to aid the user with data entry… The placeholder attribute should not be used as an alternative to a label.”

Recommendation

We recommend that you always use a proper label and use placeholders only when you feel that it would aid visitors in the completion of your form.

Placeholder example