Table of ContentsEdit this section, Opens in new window
Effective form labeling helps users understand what information to enter into a form input. Using a placeholder text as a label is often applied as a space-saving method. However, this is not recommended because it hides context and presents accessibility issues.
Clear text labels
“Clear labels makes users feel more confident that they are understanding things in the right way, and taking the right actions.”
The users wants to know what kind of data to enter in an input field and clear label text is one of the primary ways to tell them that. Of course there are situation when users can rely on icon in order to figure out the meaning of the field (e.g. users recognize a magnifying-glass icon as meaning "search" even without a textual label), but in most cases you should provide clear, always visible labels for each input field.
Short text labels
Labels are not help texts. You should use succinct, short and descriptive labels (a word or two) so users can quickly scan it. If extra information, clarification or context is required use help text to do this rather than long rambling labels.
Optional and required field
To indicate that a field is required, display an asterisk (*) next to the label text and mention near the form that asterisks indicate required fields.
- If some fields are required, indicate all required ones
- If most fields are required, indicate optional fields by displaying the word "optional" in parentheses next to the label text
- If required text is colored, that color should also be used for the asterisk
Avoid CAPS labels
You should never use all CAPS, or else the labels would be difficult to read and much harder to quickly scan, as there are no differences in character height any more.
UPPERCASE text is harder to read because the shapes of all the uppercase letters are all rectangular and users are not used to reading text that way.