<label>

Definition and Usage

The <label> element establishes a label for several form elements. It improves usability and accessibility by creating a clickable area that focuses on the associated input.

When a user clicks on the label text, the browser automatically focuses on the associated form control. This is especially useful for small controls like checkboxes and radio buttons.

The <label> element is crucial for web accessibility, as screen readers announce the label text when the user focuses on the input element.

Attributes

The <label> tag also supports the Global Attributes in HTML.

The <label> tag also supports the Event Attributes in HTML.

Examples

Explicit Association (Using "for" Attribute)

Link a label to an input using the for attribute:

<label for="username">Username:</label>
<input type="text" id="username" name="username" />

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

Implicit Association (Wrapping Input)

Wrap the input inside the label for implicit association:

<label>
  Username:
  <input type="text" name="username" />
</label>

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

Required Fields with Labels

Mark required fields clearly in labels:

<form
  >
  <label for="fullname"
    >
    Full Name <span style="color: red;">*</span
    >
  </label
  >
  <input
    type="text"
    id="fullname"
    name="fullname"
    required
  />

  <label for="phone"
    >
    Phone Number <span style="color: red;">*</span
    >
  </label
  >
  <input
    type="tel"
    id="phone"
    name="phone"
    required
  />

  <label for="company">Company (Optional)</label
  >
  <input
    type="text"
    id="company"
    name="company"
  />

  <button type="submit">Submit</button
  >
</form
>

Checkbox and Radio Button Labels

Labels are especially important for checkboxes and radio buttons:

<!-- Checkboxes -->
<fieldset>
  <legend>Select your interests:</legend>

  <label>
    <input type="checkbox" name="interests" value="coding" />
    Coding
  </label>

  <label>
    <input type="checkbox" name="interests" value="design" />
    Design
  </label>

  <label>
    <input type="checkbox" name="interests" value="marketing" />
    Marketing
  </label>
</fieldset>

<!-- Radio Buttons -->
<fieldset>
  <legend>Choose a plan:</legend>

  <label for="basic">
    <input type="radio" id="basic" name="plan" value="basic" />
    Basic - $9.99/month
  </label>

  <label for="pro">
    <input type="radio" id="pro" name="plan" value="pro" />
    Pro - $19.99/month
  </label>

  <label for="enterprise">
    <input type="radio" id="enterprise" name="plan" value="enterprise" />
    Enterprise - $49.99/month
  </label>
</fieldset>

Accessible Form with Proper Labels

Create a fully accessible form with proper labeling:

<form>
  <div class="form-group">
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName" required aria-required="true" />
  </div>

  <div class="form-group">
    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName" name="lastName" required aria-required="true" />
  </div>

  <div class="form-group">
    <label for="email">Email Address:</label>
    <input
      type="email"
      id="email"
      name="email"
      required
      aria-required="true"
      aria-describedby="email-hint"
    />
    <small id="email-hint">We'll never share your email with anyone.</small>
  </div>

  <div class="form-group">
    <label for="password">Password:</label>
    <input
      type="password"
      id="password"
      name="password"
      required
      aria-required="true"
      aria-describedby="password-hint"
    />
    <small id="password-hint">Must be at least 8 characters.</small>
  </div>

  <div class="form-group">
    <label>
      <input type="checkbox" name="terms" required />
      I agree to the <a href="/terms">Terms and Conditions</a>
    </label>
  </div>

  <button type="submit">Create Account</button>
</form>

Styled Form with Labels

Style labels for better visual presentation:

<style>
  .form-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
  }

  .form-group {
    margin-bottom: 20px;
  }

  label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
  }

  label.required::after {
    content: " *";
    color: red;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s;
  }

  input:focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-color: #745af2;
  }

  label.checkbox,
  label.radio {
    display: flex;
    align-items: center;
    font-weight: normal;
    cursor: pointer;
  }

  label.checkbox input,
  label.radio input {
    margin-right: 8px;
    width: auto;
  }
</style>

<div class="form-container">
  <form>
    <div class="form-group">
      <label for="name" class="required">Name</label>
      <input type="text" id="name" name="name">
    </div>

    <div class="form-group">
      <label for="email" class="required">Email</label>
      <input type="email" id="email" name="email">
    </div>

    <div class="form-group">
      <label class="checkbox">
        <input type="checkbox" name="newsletter">
        Subscribe to newsletter
      </label>
    </div>

    <button type="submit">Submit</button>
  </form>
</div>

Label with Form Attribute

Use the form attribute to associate labels with forms outside their structure:

<form id="myForm">
  <input type="text" id="username" name="username" />
  <button type="submit">Submit</button>
</form>

<!-- Label placed outside the form -->
<label for="username" form="myForm">Enter your username:</label>

Try it Yourself

Label Association Methods

There are two ways to associate a label with a form control:

Accessibility Importance

The <label> tag is critical for web accessibility:

• Screen Readers: Screen readers announce the label text when the input receives focus, helping visually impaired users understand what information is required.
• Clickable Area: Labels increase the clickable area of form controls, making it easier for users with motor disabilities to interact with forms.
• Mobile Devices: On touch devices, labels provide larger touch targets, improving usability for all users.
• Form Context: Labels provide context for form fields, reducing errors and improving completion rates.
• WCAG Compliance: Properly labeled forms are required for WCAG 2.1 Level A compliance.

Best Practices

• Always provide a label for every form input
• Use the for attribute to explicitly associate labels with inputs
• Keep label text concise and descriptive
• Position labels consistently (typically above or to the left of inputs)
• Clearly indicate required fields (using asterisks or the word "required")
• Don't use placeholder text as a substitute for labels
• Use <fieldset> and <legend> to group related form elements
• Ensure sufficient color contrast between labels and background
• Make labels clickable to improve user experience
• For checkboxes and radio buttons, make the entire label clickable

Form Accessibility Tips

• Use semantic HTML: Use <label>, <fieldset>, and <legend> appropriately
• Provide clear instructions: Use helper text for complex fields
• Error handling: Associate error messages with their fields using aria-describedby
• Required fields: Use both visual indicators and the required attribute
• Focus management: Ensure logical tab order through forms
• Keyboard navigation: All form controls should be accessible via keyboard
• ARIA attributes: Use ARIA attributes like aria-label, aria-labelledby, and aria-describedby when needed
• Test with screen readers: Verify that your forms work with assistive technologies

Common Use Cases

• Text Inputs: Name, email, address, search fields
• Checkboxes: Terms agreement, newsletter subscriptions, multi-select options
• Radio Buttons: Payment methods, subscription plans, survey questions
• Select Dropdowns: Country selection, category filters, date pickers
• Textareas: Comments, messages, descriptions
• File Uploads: Document uploads, image selection

Default CSS Settings

Most browsers will display the <label> element with the following default values:

label {
  cursor: default;
}

Many developers add custom styling to improve the appearance:

label {
  cursor: pointer;
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

Related Tags

• <input>

  Defines an input control

• <form>

  Defines an HTML form

• <fieldset>

  Groups related form elements

• <legend>

  Defines a caption for fieldset

• <select>

  Defines a drop-down list

• <textarea>

  Defines a multiline text input