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">