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 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.
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.
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
<form autocomplete="off" action=""> <div class="if input-wrapper"> <input data-size="larger" placeholder="Enter your last name" name="input-fields-optional-01" id="input-fields-optional-01" type="text" class="if input-field is-optional" /> <label class="if" for="input-fields-optional-01">Last name</label> </div> </form>
<form autocomplete="off" action=""> <div class="if input-wrapper"> <input data-size="larger" placeholder="Enter your last name" required name="input-fields-required-01" id="input-fields-required-01" type="text" class="if input-field" /> <label class="if" for="input-fields-required-01">Last name</label> </div> </form>
<div class="if input-wrapper"> <input class="if input-field" name="adsadsadsadsa213213213" id="adsadsadsadsa213213213" type="number" data-size="small" placeholder="1989" /> <div class="if input-label-wrapper"> <label class="if input-label" for="adsadsadsadsa213213213"> Ägs sedan </label ><span class="if inline-nowrap"><button type="button" class="if help-tooltip" aria-label="Help"></button></span> </div> <span class="if input-help"> Vilket år blev/blir du ägare? </span> </div>
- Labels must be visible when an input gets focus.
- Labels must be announced to the screen reader on focus.
- Ensure the helper text that appears under an input is read when an assistive technology user stops at an input using ARIA.
- Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized).
Always make sure that you have the correct attributes when used with a label:
And the label should have
forthat MUST be equal to the input fields
<form autocomplete="off" action=""> <div class="if input-wrapper"> <input type="text" value="Input field" class="if input-field" id="<identifier>" name="<identifier>" /> <label class="if input-label" for="<identifier>">Username</label> </div> </form>
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.