HTML: label

The <label> element gives a form control a visible name and connects the instruction to the control.

Explicit association

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

The label’s for value must exactly match the input’s id. Clicking the label then focuses the input, and assistive technology can announce its purpose.

Wrapping the control

<label>
  Subscribe to updates
  <input name="subscribe" type="checkbox">
</label>

You can also place the control inside the label. Choose one clear pattern and avoid assigning two different labels that give conflicting instructions.

Common mistakes

• Do not use placeholder text as the only label; it disappears while the user types.
• Make every for value match one unique id.
• Keep the label text meaningful instead of using vague words such as “here”.