HTML
<label>
element
represents a caption for an item in a user interface.
Associating a
<label>
采用
<input>
element offers some major advantages:
To associate the
<label>
采用
<input>
element, you need to give the
<input>
an
id
属性。
<label>
then needs a
for
an attribute whose value is the same as the input's
id
.
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:
<label>Do you like peas? <input type="checkbox" name="peas"> </label>
Other usage notes:
<label>
is clicked or tapped and it is associated with a form control, the resulting
click
event is also raised for the associated control.
此元素包括 全局属性 .
for
id
的
labelable
form-related element in the same document as the
<label>
element. The first element in the document with an
id
matching the value of the
for
attribute is the
labeled control
for this label element if it is a
labelable element
. If it is not labelable 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.
注意
: 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.
There are no special styling considerations for
<label>
elements — structurally they are simple inline elements, and so can be styled in much the same way as a
<span>
or
<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.
<label>Click me <input type="text"></label>
<label for="username">Click me</label> <input type="text" id="username">
Don't place interactive elements such as
anchors
or
buttons
在
label
. Doing so makes it difficult for people to activate the form input associated with the
label
.
<label for="tac"> <input id="tac" type="checkbox" name="terms-and-conditions"> I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a> </label>
<label for="tac"> <input id="tac" type="checkbox" name="terms-and-conditions"> I agree to the Terms and Conditions </label> <p> <a href="terms-and-conditions.html">Read our Terms and Conditions</a> </p>
Placing
heading elements
在
<label>
interferes with many kinds of assistive technology, because headings are commonly used as
a navigation aid
. If the label's text needs to be adjusted visually, use CSS classes applied to the
<label>
element instead.
若
form
, or a section of a form needs a title, use the
<legend>
element placed within a
<fieldset>
.
<label for="your-name"> <h3>Your name</h3> <input id="your-name" name="your-name" type="text"> </label>
<label class="large-label" for="your-name"> Your name <input id="your-name" name="your-name" type="text"> </label>
An
<input>
element with a
type="button"
declaration and a valid
value
attribute does not need a label associated with it. Doing so may actually interfere with how assistive technology parses the button input. The same applies for the
<button>
元素。
| 内容类别 | 流内容 , 措词内容 , interactive content , form-associated element ，可触及内容。 |
|---|---|
| 准许内容 |
措词内容
, but no descendant
label
elements. No
labelable
elements other than the labeled control are allowed.
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts 措词内容 . |
| Implicit ARIA role | 无对应角色 |
| Permitted ARIA roles |
No
role
permitted
|
| DOM 接口 |
HTMLLabelElement
|
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
label
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
for
|
Chrome 完整支持 Yes | Edge 完整支持 12 | Firefox 完整支持 Yes | IE 完整支持 Yes | Opera 完整支持 Yes | Safari 完整支持 Yes | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 Yes | Opera Android 完整支持 Yes | Safari iOS 完整支持 Yes | Samsung Internet Android 完整支持 Yes |
完整支持
<button>
<datalist>
<fieldset>
<form>
<input>
<label>
<legend>
<meter>
<optgroup>
<option>
<output>
<progress>
<select>
<textarea>