Control has no visible label
What is the problem?
It’s rare to see an input control with absolutely no visual label at all. But it is a common issue to rely on placeholder text. Placeholder text is the content of a control before it has data.
The only label for a control is placeholder text
“Placeholder text” or “disappearing text” can be very difficult for individuals with poor short-term memory. While it might be clear when the form is first presented, it is not available as a reference after any data has been entered.
An example sign-in form uses placeholder text as the only reminder that people need to include the @EqualEntry.com as part of their UserID. Nor is there a visible label for either the UserID or Password editboxes.
See the Pen 3.3.2 - Login Placeholder text as label - negative example by Equal Entry LLC (@EqualEntry) on CodePen.
Read more about how Placeholders in Form Fields Are Harmful, by Katie Sherwin.
Remove placeholder text and ensure labels are visible
If screen real estate isn’t an issue, traditional visible labels, with hints, are a clear usability and accessibility winner.
In the example above class="hidden" on the label should be removed, along with the placeholder attribute and value. The directions for the formatting of the user name should be included within the label.
See the Pen 3.3.2 - Login - positive example by Equal Entry LLC (@EqualEntry) on CodePen.
Design says “NO” to traditional visible labels
In some situations screen real estate impacts the decision to not include labels.
Add floating input labels
It’s becoming more popular as a way to keep the “clean lines” on forms that previously relied on placeholder text, while still addressing the need to have visible labels.
See the Pen Bootstrap floating label by Equal Entry LLC (@EqualEntry) on CodePen.