<label>
=======

**HTML `<label>` 元素**（标签）表示用户界面中某个元素的说明。

尝试一下
----

将一个 `<label>` 和一个 `<input>` 元素相关联主要有这些优点：

* 标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
* 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。

将一个 `<label>` 和一个 `<input>` 元素匹配在一起，你需要给 `<input>` 一个 `id` 属性。而 `<label>` 需要一个 `for` 属性，其值和 `<input>` 的 `id` 一样。

另外，你也可以将 `<input>` 直接放在 `<label>` 里，此时则不需要 `for` 和 `id` 属性，因为关联已隐含存在：


```html
<label
 >Do you like peas?
  <input type="checkbox" name="peas" />
</label>
```


其他使用事项：

* 关联标签的表单控件称为这个标签的*已关联标签的控件*。一个 input 可以与多个标签相关联。
* 点击或者轻触（tap）与表单控件相关联的 `<label>` 也可以触发关联控件的 `click` 事件。
属性
--

该元素包含 全局属性。

`for`

即和 `<label>` 元素在同一文档中的 可关联标签的元素 的 `id`。文档中第一个 `id` 值与 `<label>` 元素 `for` 属性值相同的元素，如果可关联标签（labelable），则为*已关联标签的控件*，其标签就是这个 `<label>` 元素。如果这个元素不可关联标签，则 `for` 属性没有效果。如果文档中还有其他元素的 `id` 值也和 `for` 属性相同，`for` 属性对这些元素也没有影响。

**备注：** `<label>` 元素可同时有一个 `for` 属性和一个子代控件元素，只是 `for` 属性需要指向这个控件元素。

`form`

表示与 label 元素关联的 `<form>` 元素（即它的表单拥有者）。如果声明了该属性，其值应是同一文档中 `<form>` 元素的 `id`。因此你可以将 label 元素放在文档的任何位置，而不仅作为 `<form>` 元素的后代。

使用 CSS 样式
---------

`<label>` 元素没有特别的样式考虑——结构上，`<label>` 是简单的行内元素，所以可使用和 `<span>` 或 `<a>` 元素大致相同的方式来应用样式。你也可以任意方式为 `<label>` 应用样式，只是不要让文本难以阅读。

示例
--

### 简单的 label


```html
<label>Click me <input type="text" /></label>
```

### 使用 for 属性


```html
<label for="username">Click me</label> <input type="text" id="username" />
```

无障碍问题
-----

### 交互内容

不要在 `label` 元素内部放置可交互的元素，比如 anchors 或 buttons。这样做会让用户更难激活/触发与 `label` 相关联的表单输入元素。

#### Don't


```html
<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>
```


#### Do


```html
<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>
```

### 标题

在一个 `<label>` 元素内部放置标题元素（heading elements）会干扰许多辅助技术，原因是标题通常被用于辅助导航（a navigation aid）。若标签内的文本需要做视觉上的调整，应该使用适用于 `<label>` 元素的 CSS 类。

若一个 表单，或表单中的一部分需要一个标题，应使用 `<legend>` 元素置于 `<fieldset>` 元素中。

#### Don't


```html
<label for="your-name">
  <h3>Your name</h3>
  <input id="your-name" name="your-name" type="text" />
</label>
```


#### Do


```html
<label class="large-label" for="your-name">
  Your name
  <input id="your-name" name="your-name" type="text" />
</label>
```

### 按钮

若 `<input>` 元素声明了 `type="button"` 和有效的 `value` 属性，则不需要为其添加标签。添加标签可能会影响辅助技术理解这个输入按钮的语义。`<button>` 元素也一样。

技术概览
----

|  |  |
| --- | --- |
| Content categories | Flow content, phrasing content, interactive content, form-associated element, palpable content. |
| Permitted content | Phrasing content, but no descendant `label` elements. No labelable elements other than the labeled control are allowed. |
| Tag omission | 不允许，开始标签和结束标签都不能省略。 |
| Permitted parents | Any element that accepts phrasing content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM interface | `HTMLLabelElement` (en-US) |

规范
--

| Specification |
| --- |
| HTML Standard # the-label-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

其他表单相关的元素：

* `<form>`
* `<input>`
* `<button>`
* `<datalist>`
* `<legend>`
* `<select>`
* `<optgroup>`
* `<option>`
* `<textarea>`
* `<fieldset>`
* `<output>`
* `<progress>`
* `<meter>`