# Using label elements to associate text labels with form controls

ID: H44

Technology: html

Type: Technique

## When to Use

HTML controls that use external labels

## Description

The objective of this technique is to use the `label` element to explicitly associate a form control with a label. A `label` is attached to a specific form control through the use of the `for` attribute. The value of the `for` attribute must be the same as the value of the `id` attribute of the form control.

The `id` attribute may have the same value as the `name` attribute, but both must be provided, and the `id` must be unique in the Web page.

This technique is sufficient for Success Criteria 1.1.1 (Non-Text Content), 1.3.1 (Info and Relationships) and 4.1.2 (Name, Role, Value) whether or not the `label` element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2 (Labels or Instructions), the `label` element must be visible since it provides assistance to all users who need help understanding the purpose of the field.

An additional benefit of this technique is a larger clickable area for the control, since clicking on the label or the control will activate the control. This can be helpful for users with impaired motor control.

Note that the `label` is positioned after `input` elements of `type="checkbox"` and `type="radio"`.

Elements that use explicitly associated labels are:

- inputs for text entry:
  - `input type="date"`
  - `input type="datetime-local"`
  - `input type="email"`
  - `input type="month"`
  - `input type="number"`
  - `input type="password"`
  - `input type="search"`
  - `input type="tel"`
  - `input type="text"`
  - `input type="time"`
  - `input type="url"`
  - `input type="week"`
- `input type="checkbox"`
- `input type="color"`
- `input type="file"`
- `input type="radio"`
- `input type="range"`
- `select`
- `textarea`

The `label` element is not used for the following elements:

- `button` (the label is provided by the content)
- `input type="button"` (the label is provided by the content)
- `input type="hidden"`
- `input type="image"` (the label is provided by the `alt` attribute)
- `input type="reset"` (the label is label provided by the `value` attribute)
- `input type="submit"` (the label is label provided by the `value` attribute)

## Examples

### A text input field

The text field in this example has the explicit label of "First name:". The `label` element's `for` attribute matches the `id` attribute of the `input` element.

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

### A checkbox

    <input checked id="markuplang" name="computerskills" type="checkbox">
    <label for="markuplang">HTML</label>

### A group of radio buttons

A small, related group of radio buttons with a clear description and labels for each individual element.

    <h1>Doughnut Selection</h1>
    <form action="/buy-doughnuts" method="post">
      <fieldset>
        <legend>Pick the doughnut you would like</legend>
        <input id="dn-choc" name="flavor" type="radio" value="chocolate">
        <label for="dn-choc">Chocolate</label>
        <input id="dn-cream" name="flavor" type="radio" value="cream">
        <label for="dn-cream">Cream Filled</label>
        <input id="dn-raspberry" name="flavor" type="radio" value="raspberry">
        <label for="dn-raspberry">Raspberry Filled</label>
      </fieldset>
      <input type="submit" value="Purchase Your Doughnut">
    </form>

## Tests

### Procedure

For all `input` elements of type `text`, `file` or `password`, for all `textarea` elements, and for all `select` elements in the Web page:

1. Check that there is a `label` element that identifies the purpose of the control before the `input`, `textarea`, or `select` element
2. Check that the `for` attribute of the `label` element matches the `id` of the `input`, `textarea`, or `select` element.
3. Check that the `label` element is visible.

For all `input` elements of type checkbox or radio in the Web page:

1. Check that there is a `label` element that identifies the purpose of the control after the `input` element.
2. Check that the `for` attribute of the `label` element matches the `id` of the `input` element.
3. Check that the `label` element is visible.

### Expected Results

- Checks #1 and #2 are true.
- For Success Criterion 3.3.2 (Labels or Instructions), check #3 is also true.

## Related Techniques

- G167
- H65
- H71

## Resources

- HTML - the `input` element.
- HTML - the `label` element.