Path // www.yourhtmlsource.com → Reference → <label>

<label>

by Ross Shannon

The <label> element provides a text caption for a form control. It is essential for accessibility, as it creates a programmatic association between the label text and its form control. When users click on the label, the associated form control receives focus. Screen readers announce the label when users navigate to form controls, making forms much more usable for all users.

Clock This page was last updated on 2025-11-17


Syntax

<label for="fieldid">Label Text</label>
<input type="text" id="fieldid" name="fieldname">

The element requires both opening and closing tags. The for attribute must match the id of the associated form control. Alternatively, the form control can be nested inside the label element.

Attributes

  • for - The id of the form control this label is associated with. This creates the programmatic connection between label and control.
  • form - Associates the label with a form element by its id (rarely needed)
  • Global attributes - Supports standard attributes like id, class, style

Examples

Explicit Association (Recommended)

<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>

Implicit Association (Wrapped)

<label>
  Full Name:
  <input type="text" name="fullname" required>
</label>

Checkbox with Label

<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree to the Terms of Service</label>

Radio Button Group

<fieldset>
  <legend>Preferred Contact Method</legend>
  
  <input type="radio" id="contact-email" name="contact" value="email">
  <label for="contact-email">Email</label>
  
  <input type="radio" id="contact-phone" name="contact" value="phone">
  <label for="contact-phone">Phone</label>
  
  <input type="radio" id="contact-mail" name="contact" value="mail">
  <label for="contact-mail">Mail</label>
</fieldset>

When to Use

Use the <label> element when:

  • Every visible form control needs a label (required for accessibility)
  • Creating accessible forms for all users
  • Improving click targets (clicking label focuses its control)
  • Helping screen reader users understand form fields
  • Providing context for what each form field expects

Accessibility and best practices:

  • Always use labels for form controls - they are not optional
  • Prefer explicit association with for attribute over implicit wrapping
  • Label text should be descriptive and concise
  • Place labels before inputs (above or to the left) for text fields
  • Place labels after checkboxes and radio buttons
  • Never use placeholder text as a substitute for labels
  • Include required field indicators in or near the label
  • For button elements, the button text itself serves as the label
  • Use aria-labelledby only when multiple elements label a control
  • Ensure sufficient color contrast for label text
  • <input> - Form controls that require labels
  • <select> - Dropdown controls that require labels
  • <textarea> - Multi-line text inputs that require labels
  • <fieldset> - Groups related form controls
  • <legend> - Caption for fieldset (similar purpose to label)
  • <form> - Parent form container

Common mistakes to avoid:

<!-- WRONG: No label association -->
Name: <input type="text" name="name">

<!-- WRONG: Mismatched for/id -->
<label for="user">Username:</label>
<input type="text" id="username" name="username">

<!-- CORRECT: Proper association -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">