Introduction to the <label> tag
The <label> tag is a fundamental HTML element for creating accessible and user-friendly forms. It allows you to associate a text label with a form field, providing a better user experience and enhanced accessibility for people using assistive technologies.
If you want to master HTML forms and their best practices, our comprehensive HTML course will guide you step by step in creating professional and accessible websites.
💡 A form without <label> tags is considered inaccessible. Labels are essential for screen readers and improve the experience for all users!
In this article, we will explore the <label> tag in depth, its different methods of association with form fields, its attributes, and best practices for creating truly accessible forms.
Definition and syntax of the <label> tag
What is a label?
The <label> tag represents a caption or title associated with a form element. Unlike simple text placed next to a field, the label creates a programmatic connection between the descriptive text and the corresponding field. This association allows users to click on the label text to activate or select the associated field.
The <label> tag is an inline element that can contain text and other phrasing elements, but it cannot contain other interactive elements like buttons or nested labels.
Basic syntax
There are two main methods to associate a label with a form field:
<!-- Method 1: Explicit association with the for attribute -->
<label for="email">Email address:</label>
<input type="email" id="email" name="email">
<!-- Method 2: Implicit association (wrapping) -->
<label>
Email address:
<input type="email" name="email">
</label>Both methods are valid and functional. However, the explicit method with the for attribute is generally recommended as it offers greater flexibility in layout and better compatibility with older assistive technologies.
Attributes of the <label> tag
The <label> tag accepts global HTML attributes as well as one specific attribute:
| Attribute | Description | Required |
|---|---|---|
for | Specifies the ID of the associated form element | No (if implicit association) |
class | Allows applying CSS styles | No |
id | Unique identifier for the label | No |
Label association methods
Explicit association with the for attribute
Explicit association uses the label's for attribute which must exactly match the id attribute of the form field. This method is the most common and flexible:
<form>
<div class="form-group">
<label for="learner-name">Learner name:</label>
<input type="text" id="learner-name" name="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="chosen-course">Chosen course:</label>
<select id="chosen-course" name="course">
<option value="html">HTML and CSS</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
</select>
</div>
</form>With this method, you can position the label and field anywhere in the document, as long as the ID matches. This greatly facilitates CSS layout.
Implicit association (wrapping)
Implicit association consists of directly wrapping the form field within the <label> tag. This method does not require a for attribute or an id on the field:
<form>
<label>
Accept terms and conditions
<input type="checkbox" name="terms">
</label>
<label>
Choose your level:
<select name="level">
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
</label>
</form>Warning: some older screen readers may have difficulties with implicit association. For maximum accessibility, prefer explicit association with the for attribute.
Combining both methods
For maximum compatibility, you can combine both approaches:
<label for="newsletter">
<input type="checkbox" id="newsletter" name="newsletter">
I want to receive the Believemy newsletter
</label>This technique ensures that the label works correctly on all browsers and assistive technologies.
Elements compatible with the <label> tag
List of associable elements
The <label> tag can be associated with the following form elements:
<input>(all types: text, email, password, checkbox, radio, etc.)<select><textarea><meter><output><progress>
Each of these elements benefits from association with a label to improve form accessibility and usability.
Examples with different input types
<!-- Text field -->
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname">
<!-- Email field -->
<label for="contact-email">Contact email:</label>
<input type="email" id="contact-email" name="email">
<!-- Password field -->
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<!-- Checkbox -->
<input type="checkbox" id="remember" name="remember">
<label for="remember">Remember me</label>
<!-- Radio button -->
<input type="radio" id="option1" name="options" value="1">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="options" value="2">
<label for="option2">Option 2</label>
<!-- Textarea -->
<label for="comment">Your comment:</label>
<textarea id="comment" name="comment" rows="4"></textarea>
<!-- Dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
</select>
Accessibility and the <label> tag
Importance for screen readers
Screen readers use labels to announce the purpose of each form field. Without a properly associated label, the user simply hears "edit field" or "checkbox" without knowing what it corresponds to.
With a properly associated label, the screen reader announces for example: "Email address, edit field" or "Accept terms, checkbox not checked". This contextual information is essential to allow users to navigate the form efficiently.
Extended click area
One of the major ergonomic advantages of the label is the extended clickable area. When a user clicks on the label text, the associated field is automatically activated or selected. This feature is particularly useful for:
- Checkboxes and radio buttons (small targets difficult to click)
- Users on mobile devices (touch screens)
- People with motor difficulties
<!-- Without label: user must click precisely on the checkbox -->
<input type="checkbox"> Accept terms
<!-- With label: the entire text area is clickable -->
<label>
<input type="checkbox">
Accept Believemy's terms of service
</label>
WCAG compliance
WCAG (Web Content Accessibility Guidelines) require that all form elements have an accessible label. Relevant success criteria include:
- 1.3.1 Info and Relationships: Information and relationships conveyed through presentation must be programmatically determined
- 2.4.6 Headings and Labels: Labels must describe the topic or purpose
- 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input
Practical form examples
Complete registration form
Here is an example of a typical registration form for a learning platform:
<form class="registration-form" action="/register" method="post">
<fieldset>
<legend>Personal Information</legend>
<div class="field">
<label for="reg-name">Full name *</label>
<input type="text" id="reg-name" name="name" required
aria-describedby="name-help">
<small id="name-help">As it will appear on your certificates</small>
</div>
<div class="field">
<label for="reg-email">Email address *</label>
<input type="email" id="reg-email" name="email" required>
</div>
<div class="field">
<label for="reg-password">Password *</label>
<input type="password" id="reg-password" name="password"
required minlength="8" aria-describedby="password-help">
<small id="password-help">Minimum 8 characters</small>
</div>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<div class="field">
<label for="current-level">Your current level</label>
<select id="current-level" name="level">
<option value="">-- Select --</option>
<option value="beginner">Complete beginner</option>
<option value="some">Some knowledge</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
</div>
<div class="checkbox-field">
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Receive Believemy news and tips</label>
</div>
<div class="checkbox-field">
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I accept the terms of service *</label>
</div>
</fieldset>
<button type="submit">Create my account</button>
</form>
Form with radio button groups
Radio buttons each need their own label. Here's how to organize them correctly:
<form class="choice-form">
<fieldset>
<legend>Which course interests you?</legend>
<div class="radio-option">
<input type="radio" id="course-html" name="course" value="html">
<label for="course-html">HTML and CSS - Create websites</label>
</div>
<div class="radio-option">
<input type="radio" id="course-js" name="course" value="javascript">
<label for="course-js">JavaScript - Make your pages interactive</label>
</div>
<div class="radio-option">
<input type="radio" id="course-python" name="course" value="python">
<label for="course-python">Python - Automation and data science</label>
</div>
</fieldset>
<button type="submit">View course</button>
</form>
Styling labels with CSS
Basic styles
Labels can be styled like any HTML element. Here are some common styles:
/* Basic style for all labels */
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #333;
}
/* Labels for required fields */
label.required::after {
content: " *";
color: #e74c3c;
}
/* Inline labels (for checkbox and radio) */
.checkbox-field label,
.radio-option label {
display: inline;
font-weight: normal;
margin-left: 0.5rem;
cursor: pointer;
}
/* Focus state - improves visual accessibility */
input:focus + label,
label:focus-within {
color: #3498db;
}
Floating labels
A popular technique is to create labels that move when the field receives focus:
<div class="floating-field">
<input type="text" id="floating-email" name="email" placeholder=" " required>
<label for="floating-email">Email address</label>
</div>.floating-field {
position: relative;
margin-bottom: 1.5rem;
}
.floating-field input {
width: 100%;
padding: 1rem 0.75rem 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
.floating-field label {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
transition: all 0.2s ease;
pointer-events: none;
color: #666;
}
/* When field has content or focus */
.floating-field input:focus + label,
.floating-field input:not(:placeholder-shown) + label {
top: 0.25rem;
transform: translateY(0);
font-size: 0.75rem;
color: #3498db;
}
Best practices for labels
Writing label text
A good label should be:
- Concise: "Email" rather than "Please enter your email address below"
- Descriptive: "Date of birth" rather than "Date"
- Unique: Avoid identical labels for different fields
- Jargon-free: Use terms understandable by everyone
Label placement
The optimal placement of labels depends on context:
| Position | Advantages | Use case |
|---|---|---|
| Above the field | Natural reading, good for mobile | Long forms, mobile-first |
| Left of the field | Compact, saves vertical space | Short forms, desktop |
| Right of the field | Convention for checkbox/radio | Checkboxes, radio buttons |
| Placeholder only | Minimalist | Avoid (accessibility issues) |
Never use placeholder as the only label! The text disappears as soon as the user starts typing, causing accessibility and usability problems.
Labels and required fields
Clearly indicate required fields:
<!-- Recommended method: asterisk with explanation -->
<p class="required-note">Fields marked with * are required</p>
<label for="name">Name *</label>
<input type="text" id="name" name="name" required aria-required="true">
<!-- Alternative: textual indication -->
<label for="phone">Phone (optional)</label>
<input type="tel" id="phone" name="phone">
Common mistakes to avoid
Missing or incorrect labels
<!-- ❌ INCORRECT: no label -->
<input type="text" placeholder="Enter your name">
<!-- ❌ INCORRECT: label without association -->
<label>Name:</label>
<input type="text" name="name">
<!-- ❌ INCORRECT: ID doesn't match -->
<label for="name">Name:</label>
<input type="text" id="firstname" name="name">
<!-- ✅ CORRECT -->
<label for="username">Name:</label>
<input type="text" id="username" name="name">
Empty or useless labels
<!-- ❌ INCORRECT: empty label -->
<label for="field"></label>
<input type="text" id="field">
<!-- ❌ INCORRECT: label with only an icon -->
<label for="search">🔍</label>
<input type="search" id="search">
<!-- ✅ CORRECT: accessible label even with icon -->
<label for="search">
<span class="sr-only">Search</span>
<span aria-hidden="true">🔍</span>
</label>
<input type="search" id="search">
Multiple labels for a single field
<!-- ❌ INCORRECT: two labels for one field -->
<label for="email">Email:</label>
<label for="email">(format: example@domain.com)</label>
<input type="email" id="email">
<!-- ✅ CORRECT: one label with aria-describedby for additional info -->
<label for="email">Email:</label>
<input type="email" id="email" aria-describedby="email-format">
<small id="email-format">Format: example@domain.com</small>
Browser compatibility
The <label> tag enjoys excellent compatibility with all browsers:
| Browser | Minimum version | Support |
|---|---|---|
| Chrome | 1.0 | Full ✅ |
| Firefox | 1.0 | Full ✅ |
| Safari | 1.0 | Full ✅ |
| Edge | 12 | Full ✅ |
| Opera | 4.0 | Full ✅ |
| Internet Explorer | 4.0 | Full ✅ |
The <label> tag has been part of HTML specifications since the earliest versions and is universally supported. You can use it without any compatibility concerns.
Frequently asked questions about the <label> tag
Can you associate multiple labels with a single form field?
Technically, you can have multiple labels pointing to the same ID, but it's not recommended. Screen readers may have unpredictable behavior in this case. If you need to add additional information, use the aria-describedby attribute instead to associate help text with the field.
Is the label mandatory for all form fields?
For accessibility, yes. Every form field should have an associated label. If you don't want to visually display the label (for example, for a search field with an icon), you can use the sr-only (screen reader only) CSS class to visually hide the text while keeping it accessible to assistive technologies.
What's the difference between placeholder and label?
The placeholder is example or hint text that appears inside the field and disappears as soon as the user starts typing. The label is permanent text that identifies the field. The placeholder should never replace the label because it causes accessibility issues: users can no longer see the indication once they've started filling in the field.
How can I learn to create accessible HTML forms?
To master creating accessible forms and all aspects of HTML, our course to learn HTML guides you step by step. You'll discover all the best practices for creating professional websites accessible to everyone.