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.
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.
Placeholder as an example
Include example text outside of the input instead of as a placeholder
Providing an example of the needed input helps a user understand the request. However, incorporating the example as placeholder text causes issues including: disappearance on focus, confusion regarding what has been entered, and reduction of the input acting as an affordance. As an alternative, example text can be placed below the input field.
Placeholder as help text