Alternatives to Placeholder Text –

Improve form usability by addressing the perils of placeholders

Placeholders cause problems

Placeholder text can be used as an attribute for almost every HTML input type, and misguided designers and developers don’t hesitate. It is tempting to provide text help for complex forms, or omit input labels to improve aesthetics. However, employing placeholder text to do so causes many usability issues.

This article illustrates common bad practices, and proposes alternatives.

Placeholder as a label

Place a label above the input instead of using a placeholder as a label

In an attempt to shorten the length of a form or reduce visual noise, designers use placeholder text as an input label. This practice places burden on short-term memory. The label disappears as soon as the user clicks and/or types. The entry must be deleted to expose the label again.

It is better to include an input label directly above the input field. The blank input field acts as an affordance to enter data. Users look to the unfilled boxes to determine what they need to act on.

Author: Andrew Coyle

Collect by: