JavaScript: 将一个 <label> 和一个 <input> 元素相关联
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/label
<label>
<div class="preference">
<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">
</div>
<div class="preference">
<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas">
</div>
HTML <label> 元素（标签）表示用户界面中某个元素的说明。
将一个 <label> 和一个 <input> 元素相关联主要有这些优点：
- 标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
- 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。
将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。
另外，你也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在：
<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>Click me <input type="text"></label>
使用 for 属性
<label for="username">Click me</label>
<input type="text" id="username">
