The Label Element — Associating Labels with Form Controls

In this tutorial, you will learn about The Label Element. We cover key concepts, practical examples, and best practices to help you master this topic.

The HTML label element creates a programmatic association between descriptive text and a form control using the for attribute matched to an id.

What You'll Learn

How to use the label element correctly, why it matters for Accessibility, and the difference between explicit and implicit labeling.

Why It Matters

Without a proper label, a screen reader announces "edit blank" leaving the user unable to identify what information is expected. Labels also increase the clickable area of checkboxes and radio buttons.

Real-World Use

A registration form with 20 fields uses properly associated labels. A screen reader user tabs through the form and hears "Email address, edit, email@example.com" for each field, knowing exactly what to enter.

Label Association Methods

<!-- Explicit label with for/id -->
<label for="email">Email address</label>
<input type="email" id="email" name="email">

<!-- Implicit label (wrapping) -->
<label>
  Full name
  <input type="text" name="fullname">
</label>

<!-- Hidden label for search (still accessible) -->
<label for="search" class="sr-only">Search the site</label>
<input type="search" id="search" name="q">

How It Appears to Screen Readers

<label for="phone">Phone number</label>
<input type="tel" id="phone" name="phone"
       autocomplete="tel"
       aria-describedby="phone-format">
<span id="phone-format">Format: (555) 555-5555</span>

The screen reader announces: "Phone number, edit, with format hint, Format: (555) 555-5555."

Label Visibility

/* Visually hidden but screen-reader accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Common Mistakes

1. Using placeholder as the only label

Placeholder disappears on input, leaving the field unlabeled.

2. Missing for/id match

The for attribute must exactly match the id value of the input.

3. Using title attribute alone

Title shows on hover only and is not reliably announced by screen readers.

4. Multiple labels for one input

Only one label should be associated with each form control.

5. Forgetting labels on non-text inputs

Checkboxes and radio buttons need labels too.

Practice Questions

1. What attribute on the label matches the input's attribute? The for attribute on label matches the id attribute on the input.

2. What is the benefit of explicit labelling? It works even when the label and input are in different containers, and the label is clickable.

3. How do you hide a label visually but keep it accessible? Use a CSS sr-only class that clips the label visually but keeps it in the accessibility tree.

Challenge: Write a label that successfully associates with a checkbox. Ensure clicking the label toggles the checkbox correctly.

FAQ

Mini Project

Take an existing form that uses placeholder as labels. Add proper label elements with for/id associations. Test with a screen reader to confirm each field is announced correctly.

What's Next

Now explore Labeling Methods with aria-label and aria-labelledby for cases where a visual label is not possible.