You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- : The value is the [`id`](/en-US/docs/Web/HTML/Reference/Global_attributes/id) of the [labelable](/en-US/docs/Web/HTML/Guides/Content_categories#labelable) form control in the same document, [associating the `<label>` with that form control](#associating_a_label_with_a_form_control). Note that its JavaScript reflection property is [`htmlFor`](/en-US/docs/Web/API/HTMLLabelElement/htmlFor).
40
+
41
+
## Usage notes
42
+
43
+
### Associating a label with a form control
44
+
45
+
The first element in the document with an `id` attribute matching the value of the `for` attribute is the _labeled control_ for this `label` element — if the element with that `id` is actually a [labelable element](/en-US/docs/Web/HTML/Guides/Content_categories#labelable). If it is _not_ a labelable element, then the `for` attribute has no effect. If there are other elements that also match the `id` value, later in the document, they are not considered.
46
+
47
+
Multiple `<label>` elements can be associated with the same form control by having multiple `<label>` elements with the same `for` attribute value, which gives the form control multiple labels.
48
+
34
49
Associating a `<label>` with a form control, such as {{htmlelement("input")}} or {{htmlelement("textarea")}} offers some major advantages:
35
50
36
51
- The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
37
52
- When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.
38
53
54
+
There are two ways to associate a `<label>` with a form control, commonly referred to as _explicit_ and _implicit_ association.
55
+
39
56
To explicitly associate a `<label>` element with an `<input>` element, you first need to add the `id` attribute to the `<input>` element. Next, you add the `for` attribute to the `<label>` element, where the value of `for` is the same as the `id` in the `<input>` element.
40
57
58
+
```html
59
+
<labelfor="peas">I like peas.</label>
60
+
<inputtype="checkbox"name="peas"id="peas" />
61
+
```
62
+
41
63
Alternatively, you can nest the `<input>` directly inside the `<label>`, in which case the `for` and `id` attributes are not needed because the association is implicit:
42
64
43
65
```html
44
66
<label>
45
-
Do you like peas?
67
+
I like peas.
46
68
<inputtype="checkbox"name="peas" />
47
69
</label>
48
70
```
49
71
72
+
> [!NOTE]
73
+
> A `<label>` element can have both a `for` attribute and a contained control element, as long as the `for` attribute points to the contained control element.
74
+
75
+
These two methods are equivalent, but there are a few considerations:
76
+
77
+
- While common browser and {{glossary("screen reader")}} combinations support implicit association, not all assistive technologies do.
78
+
- Depending on your design, the type of association may impact stylability. Making the `<label>` and form control sibling elements instead of parent-child means they are separate, adjacent boxes, enabling more customizable layout such as lining them up with grid or flex layout methods.
79
+
- Explicit association requires the form control to have an `id`, which must be unique in the whole document. This is hard especially in a componentized application. Frameworks often provide their own solutions, such as React's [`useId()`](https://react.dev/reference/react/useId), but it still requires extra orchestration to get right.
80
+
81
+
Generally, we recommend using explicit association with the `for` attribute, to ensure compatibility with external tools and assistive technologies. In fact, you can simultaneously nest _and_ provide `id`/`for` for maximum compatibility.
82
+
50
83
The form control that a label is labeling is called the _labeled control_ of the label element. Multiple labels can be associated with the same form control:
51
84
52
85
```html
@@ -57,32 +90,11 @@ The form control that a label is labeling is called the _labeled control_ of the
57
90
58
91
Elements that can be associated with a `<label>` element include {{HTMLElement('button')}}, {{HTMLElement('input')}} (except for `type="hidden"`), {{HTMLElement('meter')}}, {{HTMLElement('output')}}, {{HTMLElement('progress')}}, {{HTMLElement('select')}} and {{HTMLElement('textarea')}}.
59
92
60
-
## Attributes
61
-
62
-
This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Global_attributes).
- : The value of the `for` attribute must be a single [`id`](/en-US/docs/Web/HTML/Reference/Global_attributes/id) for a [labelable](/en-US/docs/Web/HTML/Guides/Content_categories#labelable) form-related element in the same document as the `<label>` element. So, any given `label` element can be associated with only one form control.
66
-
67
-
> [!NOTE]
68
-
> To programmatically set the `for` attribute, use [`htmlFor`](/en-US/docs/Web/API/HTMLLabelElement/htmlFor).
69
-
70
-
The first element in the document with an `id` attribute matching the value of the `for` attribute is the _labeled control_ for this `label` element — if the element with that `id` is actually a [labelable element](https://html.spec.whatwg.org/multipage/forms.html#category-label). If it is _not_ a labelable element, then the `for` attribute has no effect. If there are other elements that also match the `id` value, later in the document, they are not considered.
71
-
72
-
Multiple `label` elements can be given the same value for their `for` attribute; doing so causes the associated form control (the form control that `for` value references) to have multiple labels.
73
-
74
-
> [!NOTE]
75
-
> A `<label>` element can have both a `for` attribute and a contained control element, as long as the `for` attribute points to the contained control element.
76
-
77
-
## Styling with CSS
78
-
79
-
There are no special styling considerations for `<label>` elements — structurally they are inline elements, and so can be styled in much the same way as a {{htmlelement("span")}} or {{htmlelement("a")}} element. You can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read.
80
-
81
93
## Accessibility
82
94
83
95
### Interactive content
84
96
85
-
Don't place interactive elements such as {{HTMLElement("a", "anchors")}} or {{HTMLElement("button", "buttons")}} inside a `label`. Doing so makes it difficult for people to activate the form input associated with the `label`.
97
+
Other than the [implicitly associated](#associating_a_label_with_a_form_control) form control, don't place additional interactive elements such as {{HTMLElement("a", "anchors")}} or {{HTMLElement("button", "buttons")}} inside a `<label>`. Doing so makes it difficult for people to activate the form input associated with the `label`.
86
98
87
99
**Don't do this:**
88
100
@@ -96,15 +108,18 @@ Don't place interactive elements such as {{HTMLElement("a", "anchors")}} or {{HT
96
108
**Prefer this:**
97
109
98
110
```html example-good
111
+
<p>
112
+
<ahref="terms-and-conditions.html">Read our Terms and Conditions</a>
<ahref="terms-and-conditions.html">Read our Terms and Conditions</a>
105
-
</p>
106
118
```
107
119
120
+
> [!NOTE]
121
+
> It is a good practice to place any necessary context, such as the link to the terms and conditions, before the form control, so that the user can read it before they interact with the control.
122
+
108
123
### Headings
109
124
110
125
Placing [heading elements](/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements) within a `<label>` interferes with many kinds of assistive technology, because headings are commonly used as [a navigation aid](/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#navigation). If the label's text needs to be adjusted visually, use CSS classes applied to the `<label>` element instead.
0 commit comments