Labeling Controls

Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, drop-down menus, and button elements. In most cases this is done by using the <label> element, and in some cases the title attribute.

Labels need to describe the purpose of the form control. This section of the tutorial describes how to provide labels so that they are properly associated with form controls. Later sections explain how to provide instructions, validate user input, and provide feedback to help users complete your form.

Labels and their related form control must be associated with each other either implicitly or explicitly. This allows the browser to do things like use the label as a larger clickable area to access or activate the control, and ensures assistive technology can refer to the correct label when presenting a form control.

Associating labels implicitly ¶

The most basic way to associate labels with form controls is to provide both the label and the form control within the same <label> element. In the following example, the <input> element of type text allows users to provide their first name. This input field is embedded inside a <label> element with the text "First name:", to indicate the purpose of the input field to the user:

<label>First name: <input type="text" name="firstname"></label>

Associating labels explicitly ¶

Use the for attribute of the <label> element to explicitly associate labels with their form controls. The value of the for attribute must exactly match the value of the id attribute for the referenced form element.

This approach is more robust because it explicitly associates the labels with the form elements within the code. It allows the labels and form controls to be displayed separately, for example on a mobile device when only one of the controls can be displayed at a time. It is also independent of the HTML code structure, which is particularly useful when the label text and form element are not included within the same parent element in the HTML code – for example, when the form is formatted to look like a table, as in the example below.

<form method="post" action="#" id="expl_label_form">
  <div>
    <div>
      <label for="firstname">First name: </label>
    </div>
    <div>
      <input type="text" name="firstname" id="firstname">
    </div>
  </div>
</form>

#expl_label_form {display:table}
#expl_label_form>div {display:table-row}
#expl_label_form>div>div {display:table-cell;}

Positioning labels ¶

In left-to-right languages it is customary to visually position labels to the right of radio buttons and checkboxes, and to the left or directly above other form fields. Maintaining this practice increases predictability and understandability of your form for all users.

In general, placing labels above the form fields helps reduce horizontal scrolling for people using screen magnification and for mobile device users. However, the usefulness of this approach depends on other design aspects, such as the proximity of other nearby form fields and content, and needs to be assessed individually. The aim should be to maintain a close visual relationship between the label and the form control.

Hiding labels ¶

A label for a form control helps everyone better understand its purpose. In some cases the purpose may be clear enough from the context when the content is rendered visually. In such cases a label can be hidden visually though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users.

Single form control ¶

In the example below, the search field is positioned directly beside the search button. The purpose of the form field is evident from the context in most situations.

Hiding the label element

A <label> element is provided to identify the form element within the code, but is visually hidden to avoid redundancy for those who don't need it.

<label for="search" class="visuallyhidden">Search: </label>
<input type="text" name="search" id="search">
<button type="submit">Search</button>

Using aria-label

aria-label provides the label to assistive technology.

<input type="text" name="search" id="search" aria-label="Search">
<button type="submit">Search</button>

Note on hiding elements ¶

Screen readers and other assistive technology, as with web browsers, hide elements from their users when they are styled using display: none; and visibility: hidden;. Use CSS that will display the elements yet make them virtually invisible to hide them visually but keep them active for screen readers and other assistive technology. The CSS code used in the previous examples is provided below:

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Set of form controls ¶

In the following example, the user is asked to provide date of birth. There are three form controls; a small text field for day of month, a pull-down menu for month, and a slightly larger text field for year. The text controls also use placeholder text to further indicate the purpose of these two fields. A single visible label "Date of birth" is sufficient to explain this related set of form controls in most situations.

Hiding the label element

To make the code more robust and address other situations, such as displaying the form controls individually on a mobile device, hidden labels have been provided for each form element. They are now identified as “Day”, “Month”, and “Year” within the code.

<label for="day">Date of birth: </label>

<label for="day" class="visuallyhidden">Day: </label>
<input type="text" id="day" maxlength="2" placeholder="01">

<label for="month" class="visuallyhidden">Month: </label>
<select name="month" id="month">
  <option value="01">January</option>
  <option value="02">Febuary</option>
  […]
</select>

<label for="year" class="visuallyhidden">Year: </label>
<input type="text" id="year" maxlength="4" placeholder="1970">

Using aria-label

The code can be simplified by using aria-label, with the same outcome as above. It is however less flexible, for example, if the labels need to be shown or hidden depending on the screen size.

<label for="day">Date of birth: </label>

<input type="text" id="day" maxlength="2" placeholder="01" aria-label="Day">

<select name="month" id="month" aria-label="Month">
  <option value="01">January</option>
  <option value="02">Febuary</option>
  […]
</select>

<input type="text" id="year" maxlength="4" placeholder="1970"  aria-label="Year">

Using the title attribute ¶

The title attribute can be used to identify form elements. This approach is generally less reliable and not recommended because some screen readers and assistive technology do not interpret the title attribute as a replacement for the label element, possibly because the title attribute is often used to provide non-essential information.

<input title="Search" type="text" name="search" id="search">
<button type="submit">Search</button>