<label>
The <label> element names a form control and can associate with it explicitly or by wrapping it. Proper labels improve usability, focus behavior, and accessible names.
Overview
The <label> element names a form control and can associate with it explicitly or by wrapping it. Proper labels improve usability, focus behavior, and accessible names.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | ≤4 | 18 | ≤3.2 | |
| HTML attribute | ||||||
| The for attribute is an allowed attribute for label and output. When used on a element it indicates the form element that this label describes. When used on an element it allows for an explicit relationship between the elements that represent values which are used in the output. | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| DOM API | ||||||
| The HTMLLabelElement interface gives access to properties specific to label elements. It inherits methods and properties from the base HTMLElement interface. | 1 | 12 | 1 | 3 | 18 | 1 |
| The read-only HTMLLabelElement.control property returns a reference to the control (in the form of an object of type HTMLElement or one of its derivatives) with which the label element is associated, or null if the label isn't associated with a control. | 6 | 18 | 4 | 5.1 | 18 | 5 |
| The form read-only property of the HTMLLabelElement interface returns an HTMLFormElement object that owns the HTMLLabelElement.control associated with this label, or null if this label is not associated with a labelable form-associated element (button, input, output, select, textarea, or form-associated custom elements) that is owned by a form. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLLabelElement.htmlFor property reflects the value of the for content property. That means that this script-accessible property is used to set and read the value of the content property for, which is the ID of the label's associated control element. | 1 | 12 | 1 | 3 | 18 | 1 |
Syntax
<!-- bind with for attribute --> <label for="username">username:</label> <input type="text" id="username"> <!-- bind with nested attribute --> <label>email: <input type="email"></label>Live demo
label and formelement. associated
For attribute in label and inputelement.click in focusmove.
label. putchild
label middle to input includepattern.for attribute none in associated.
Use cases
Named form inputs
Associate text fields, checkboxes, radios, and selects with clear visible labels.
Larger activation area
Clicking the label can focus or toggle the control, improving touch and mouse usability.
Cautions
- Placeholder text is not a replacement for a real label.
- Make sure the label text matches the task users are completing rather than exposing internal field names.
Accessibility
- A strong label is one of the most important accessibility improvements for forms, especially for screen reader and cognitive support.
Related links
Powered by web-features