← Back to All Tags

<label>

Associates descriptive labels with inputs

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.

Tip: The for attribute of <label> must be equal to the id attribute of the related element to bind them together. Alternatively, you can wrap the input inside the label (implicit association).
Accessibility: Always use labels with form inputs. They are essential for screen reader users and improve the experience for all users by increasing the clickable area.

Browser Support

The <label> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

Attribute Value Description
for element_id Specifies which form element a label is bound to. The value must match the id of the form element.
form form_id Specifies which form the label belongs to. This allows labels to be placed outside their associated form.

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:

Example

<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:

Example

<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:

Example

<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:

Example

<!-- 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:

Example

<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:

Example

<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:

Example

<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

Interactive Example

Click on the labels to see how they focus the inputs:

Label Association Methods

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

Method Code Example Pros Cons
Explicit (for attribute) <label for="id"> • Flexible positioning
• Label and input can be anywhere
• Clearer structure 		• Requires unique IDs
• More code to write
Implicit (wrapping) <label><input></label> • No ID required
• Less code
• Simpler for basic forms 		• Less flexible layout
• Input must be inside label
Best Practice: Use explicit association (for attribute) for better maintainability and flexibility, especially in complex forms.

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.
Warning: Never use placeholder text as a replacement for labels. Placeholders disappear when users start typing and are not accessible to all users.

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:

Default CSS

label {
  cursor: default;
}

Many developers add custom styling to improve the appearance:

Common Custom CSS

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

Related Tags