How to Use the label Element

The HTML label element gives a form control a clear name. Associating the label with its control helps people using a mouse, keyboard, or assistive technology understand what to enter or choose.

The answer first

Minimal example

<label for="user-name">Name</label>
<input id="user-name" name="name" type="text">

Matching for and id associates the name with the input. Match for with the control's id, not its name.

In this example, clicking or tapping the label also makes it easier to focus the associated input. A real form should also provide a suitable form and submission destination.

Two ways to associate a label

1. Explicit association with for and id

<label for="email">Email address</label>
<input id="email" name="email" type="email">

This keeps the label and control separate, which can make layouts easier to organize. Keep the id unique and point to a labelable form control in the same tree.

2. Put the control inside the label

<label>
  Email address
  <input name="email" type="email">
</label>

This implicit association does not need for. If a label contains multiple controls, it becomes unclear which control the label names, so one label should normally name one labelable control.

Check boxes and radio buttons

Give each check box or radio button its own label. When several choices make up one question, use fieldset and legend for the group name.

<fieldset>
  <legend>Contact method</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

The individual choice is named by its label; the group is named by its legend. They solve different problems.

Controls that can be labelled

A label cannot be associated with every HTML element. Common labelable controls include input, select, textarea, and button. A state such as input type="hidden" is not a visible interactive control to label in the usual way.

Common mistakes

• Matching for with name. Match it with the control's id.
• Trying to associate a separate label with a control that has no id. Explicit association needs both values.
• Using only a placeholder to explain the field. Provide a persistent label.
• Putting several controls inside one label. The named control then becomes unclear, so use a one-to-one association.
• Putting a link or another button inside a label. Competing click targets can make mouse, keyboard, and assistive-technology use confusing.

Going further

A label is not just a visual heading. It represents a caption for a form control, and its associated text can contribute to the control's accessible name. If aria-label or aria-labelledby is also present, check the complete accessible-name computation.

Check it in Atlas

For the for and id conditions, labelable-element scope, label activation behavior, the HTMLLabelElement API, and accessibility details, see the label element in Yugien Atlas.