Français

<label>

Tell the user what you expect in a field — and make it clickable

— 1 min read

  • HTML
  • accessibility
  • semantics
  • forms

<label> — The field label

The <label> element associates descriptive text with a form field. Two methods: explicit association via for/id, or implicit association by wrapping the field inside the <label>.

When to use it

Every visible form field must have a <label>. No exceptions. A field without a label is an inaccessible field.

What you gain

Accessibility: screen readers read the label when the field receives focus. Without a label, the user does not know what is being asked. As a bonus, clicking the label gives focus to the field — enlarged click target.

Code example

<!-- Explicit association (recommended) -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">
 
<!-- Implicit association (wrapping) -->
<label>
  Email:
  <input type="email" name="email">
</label>

Further reading