Live Preview
A simple labeled contact form:
HTML <label> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll write accessible, user-friendly form labels that work for everyone.
Core Syntax
Link labels to controls with for and matching id.
Implicit Labeling
Wrap inputs inside <label> when layout allows.
Checkboxes & Selects
Label radios, checkboxes, and dropdown menus correctly.
label vs placeholder
Know why placeholders cannot replace visible labels.
CSS Styling
Style labels for clear, consistent form layouts.
Accessibility
Help screen readers and keyboard users interact with forms.
Fundamentals
What Is the <label> Tag?
The label element (<label>) represents a caption for a labelable form control — such as input, select, textarea, button, meter, output, or progress. A proper label tells users what data to enter and gives assistive technology an accessible name for the field.
Clickable and accessible
When a label is correctly associated, clicking the label text focuses or activates the control. This enlarges the clickable target and is especially helpful on touch screens and for users with motor difficulties.
Labels are one of the most important accessibility features in HTML forms. Every visible field should have a descriptive label — do not rely on placeholder text alone.
Foundation
📝 Syntax
The most common pattern uses for on the label and a matching id on the control:
syntax-explicit.html
<label for="username">Username:</label>
<input type="text" id="username" name="username">Implicit Labeling
You can also nest the control inside the label — no for attribute needed:
syntax-implicit.html
<label>
Email:
<input type="email" name="email">
</label>Syntax Rules
formust exactly match the associated control’sid.- Each
idmust be unique on the page. - A label associates with one control — do not reuse the same
id. - Prefer explicit
for/idwhen label and input are in different layout containers.
Cheat Sheet
⚡ Quick Reference
| Use Case | Code Snippet | Notes |
|---|---|---|
| Text input | <label for="name">Name</label> | Match id="name" on input |
| Checkbox | <label for="agree">I agree</label> | Clicking label toggles checkbox |
| Select menu | <label for="country">Country</label> | Pairs with <select id="country"> |
| Textarea | <label for="msg">Message</label> | Works with multiline fields |
| Outside form | form="myForm" on label + control | Links control to distant form |
| Implicit wrap | <label>Text <input></label> | No for needed when nested |
Comparison
⚖️ <label> vs placeholder
Placeholders are hints inside the field; labels are persistent, accessible names:
| Feature | <label> | placeholder |
|---|---|---|
| Visibility | Always visible beside or above the field | Disappears when user types |
| Accessibility | Primary accessible name for the control | Not a label replacement |
| Click target | Clicking label focuses the field | No click behavior |
| Best practice | Required for every visible field | Optional hint text only |
Reference
🧰 Attributes
The <label> element supports these specific attributes plus global attributes such as class:
for Explicit linkMatches the id of the associated labelable form control.
for="email"form AssociationAssociates the label with a form by id when the label sits outside the form element.
form="userForm"class GlobalCSS hook for layout, typography, and required-field indicators.
class="field-label"id GlobalUnique identifier when referencing the label from aria-labelledby.
id="email-label" attributes.html
<form id="userForm">
<label for="email" form="userForm">Email:</label>
<input type="email" id="email" name="email" form="userForm">
</form>Hands-On
Examples Gallery
Email fields, passwords, checkboxes, and dropdown menus with copy-ready label markup and live previews.
Email with form Attribute
Associate a label and input with a form using matching form and for/id values.
email-label.html
<form id="userForm">
<label for="email" form="userForm">Email:</label>
<input type="email" id="email" name="email" form="userForm">
</form>📚 Common Use Cases
Use <label> on every form field — text inputs, passwords, checkboxes, radio buttons, selects, and textareas. Clear labels reduce errors and are required for accessible forms.
Password Field Label
Label password inputs so users and assistive technology know what to enter.
password-label.html
<label for="password">Password:</label>
<input type="password" id="password" name="password">Checkbox Label
Place the label after the checkbox so clicking the text toggles the box.
checkbox-label.html
<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">Subscribe to newsletter</label>Select Dropdown Label
Help users understand what a dropdown menu is for.
select-label.html
<label for="country">Select your country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
</select>Design
Styling <label> with CSS
Style labels for readable, consistent form layouts. Keep labels visible and maintain strong contrast:
font-weight Medium-weight labelsdisplay: block Stacked label + input.required Required field markercursor Pointer on clickable labels label-styles.css
/* Form label styling */
label {
display: block;
font-weight: 500;
color: #0f172a;
margin-bottom: 0.35rem;
cursor: pointer;
}
label.required::after {
content: " *";
color: #dc2626;
}
.demo-form__choice label {
display: inline;
font-weight: 400;
margin: 0;
}Live styled labels
A11y
♿ Accessibility
Labels are essential for inclusive forms:
- Every visible field needs a name — usually from a
<label>element. - Do not use placeholder as the only label — it vanishes on input and may not be announced reliably.
- Clickable labels help motor impairments — larger targets are easier to tap and click.
- Use unique ids — duplicate ids break label association and confuse assistive technology.
🧠 How <label> Works
1
Author writes label + control
Connect them with for/id or nest the input inside the label.
Markup
2
Browser links label to control
Clicking label text focuses or activates the associated field.
Behavior
3
Assistive tech reads the label
Screen readers announce the label as the field’s accessible name.
Accessibility
=
Clear, usable forms
Users understand each field and can interact with forms more easily.
Compatibility
Universal Browser Support
The <label> element is fully supported in all browsers, including legacy Internet Explorer.
Baseline · Since HTML 4
Form labels that work everywhere
From legacy Internet Explorer to the latest mobile browsers — the label element is fully supported for accessible forms.
100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 6+ · Legacy environments
Full supportOpera All modern versions
Full support<label> tag 100% supported
Bottom line: Ship accessible forms with confidence. The <label> element is safe to use in every production environment today.
Wrap Up
Conclusion
The <label> tag is a small element with a big impact on form usability and accessibility. Whether you are building login pages, contact forms, or settings panels, clear labels help every user understand what to enter.
Remember to pair every control with a label, use for and id correctly, and never rely on placeholder text alone.
Pro Tips
💡 Best Practices
✅ Do
- Use
forand matchingidon every field - Write descriptive, concise label text
- Label checkboxes and radio buttons clearly
- Keep labels visible at all times
❌ Don’t
- Replace labels with placeholder text only
- Reuse the same
idon multiple controls - Leave icon-only fields without accessible names
- Hide labels with CSS while leaving fields visible
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <label>
Bookmark these before you ship — they’ll keep your forms accessible and easy to use.
6
Core concepts 01
Form Caption
<label> names a form control for users and assistive tech.
02
for + id
Match for on label to id on the control.
03
Clickable Text
Clicking the label focuses or toggles the field.
UX 04
Checkboxes Too
Always label radios, checkboxes, and selects.
Forms 05
Not a Placeholder
Labels stay visible; placeholders are hints only.
Accessibility 06
Universal Support
Works in every browser, including legacy IE.
Compatibility❓ Frequently Asked Questions
It provides a caption for a form control, improving usability and giving the field an accessible name for screen readers.
It links the label to the control whose
id matches the for value.Yes. Nesting the control inside
<label> is implicit labeling and works without a for attribute.No. Placeholders disappear when typing and are not reliable accessible names. Always use a visible label.
Labelable elements include
input (except hidden), select, textarea, button, meter, output, and progress.Yes. The label element has universal support in all modern and legacy browsers.
Practice Form Labels
Try email, password, checkbox, and select labels in the interactive editor.
About the author
6 people found this page helpful