label
2023年07月18日
一、认识
label 表示用户界面中某个元素的说明。
二、语法
2.1 id 关联
将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。
<label for='a'></label>
<input id="a" />
2.2 包含关联
可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在
<label>
<input>
</label>
三、属性
3.1 for
3.2 from
四、特点
4.1 交互
<label> 标签可以触发关联标签的交互事件。因此, 不要在 label 元素内部放置可交互的元素，比如 anchors 或 buttons。这样做会让用户更难激活/触发与 label 相关联的表单输入元素。
关联<input type='file'>
// id 关联
<label for="a">文件上传</label>
<input id="a" type="file" hidden>
// 包含关联
<label
>文件上传
<input type="file" hidden />
</label>
关联<input type='radio'>
// id 关联
<label for="a">A</label>
<input id="a" type="radio" />
// 包含关联
<label
>A
<input type="radio" />
</label>