HTML <label> Element
The HTML <label> element provides a descriptive caption for a form control. Associating a label with an input makes the control easier to understand and allows users to activate or focus many controls by selecting the label text.
Syntax
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first-name">The for attribute on the <label> should match the id of the form control it describes. This creates an explicit association between the label and the control.
Attributes
The <label> element supports the global HTML attributes and the following element-specific attribute:
| Attribute | Description |
|---|---|
for |
Specifies the id of the form control associated with the label. |
Example
This example uses <label> elements with text and email inputs. Each label's for attribute matches the id of its corresponding input.
Usage Notes
The most common way to associate a label with a control is to give the control an id and use that same value in the label's for attribute.
A form control can also be placed inside a <label> element to create an implicit association, but using matching for and id values makes the relationship explicit and is often easier to maintain.
Labels are commonly used with controls such as <input>, <textarea>, <select>, <meter>, <progress>, and <output> when those elements are labelable.
Selecting a label normally transfers focus to its associated control or activates the control. This is especially useful for small controls such as checkboxes and radio buttons because the label text increases the clickable area.
Do not associate one label with several unrelated controls. Each control that requires its own description should have an appropriate label.
Buttons normally provide their own accessible name through their visible text or value, so they generally do not require a separate <label>.
Accessibility
Providing a properly associated <label> gives a form control an accessible name that screen readers can announce when the control receives focus.
Use visible labels whenever possible. Placeholder text should not replace a label because it can disappear when the user enters a value and may not provide a reliable description of the control.
Keep label text clear and specific so users can understand what information is expected before interacting with the control.
For groups of related controls such as radio buttons or checkboxes that answer one question, use <fieldset> and <legend> to describe the group in addition to labeling the individual controls.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <label> Element .
Related Elements
<input> - Creates form controls for entering and selecting data.
<textarea> - Creates a multi-line text entry control.
<select> - Creates a control for selecting from a list of options.
<fieldset> - Groups related form controls and labels.
<legend> - Provides a caption for the contents of a <fieldset>.
<form> - Represents a form used to collect and submit user input.