下载掌阅APP，畅读海量书库
立即打开
<label>元素可以看成一个“伴生”元素，注意“伴生”这里打了引号，旨在表明<label>元素并不是真的不能单独使用，而是需要和其他元素产生关联才能体现其价值。
那么是哪些元素呢？
· 第一类是传统的表单控件元素，各类<button>、<input>、<textarea>和<select>等元素。
· 第二类是在接下来几章会介绍的<progress>和><meter>元素。
· 第三类就是非典型的表单元素<output>元素。
除此之外，没有任何使用<label>元素的理由（当然，对于非链接标签，你硬要使用<label>元素也不会有人说什么）。
与之相对，如果遇到这些元素，也务必使用<label>元素，不少人在日常开发时并未注意到这一点，比如一个登录表单，往往会使用如下所示的HTML代码：
从视觉表现上讲，你这么写没什么问题，无论是布局还是样式都可以很好地还原设计稿，但在交互体验方面，还有进步的空间，很简单，将<span>元素换成<label>元素，如下所示：
这样做有两点好处：
· 语义更精准，类似屏幕阅读器这样的设备识别体验更好，例如，当用户专注于表单输入时，屏幕阅读器将读出标签信息，这样用户就更容易理解应该输入什么数据。
· 优雅地扩大了输入框的响应区域，这一点值得好好说一说。
当<label>元素和表单控件元素产生关联的时候，点击<label>元素，表单元素会自动处于激活态。输入框表现为聚焦，单选按钮和复选框表现为选中态切换。
尤其是后者，在用户体验层面极为受用，因为单选按钮和复选框的点击区域都很小，尤其在移动端，很难一次就选中，因此使用<label>元素扩大点击区域就显得非常有必要。例如：
此时，哪怕你点击文字，复选框也会被选中，如图3-27所示。
图3-27 <label>元素扩大点击区域
这是所有前端开发人员都务必知道的交互常识。
1.产生关联的方式
<label>元素和特定元素产生关联的方式有两种，一种是通过特定的HTML属性，另一种是通过HTML结构关系。
通过HTML属性产生关联的方式，就是使用for属性，使其值等同于表单控件元素的id属性值，例如：
通过HTML结构关系产生关联的方式，就是将表单控件元素放在<label>元素之中，例如：
以上两种方式在如今都是可以放心使用的。
这里正好展开讲一下for属性。
2.for属性的使用
在HTML中，for属性的值是不能使用elment.for这样的语法获取的，因为for是个JavaScript关键字，要使用htmlFor代替。例如：
图3-28所示就是上述代码在演示页面所在的控制台运行的结果。
图3-28 for属性值不同获取方法输出结果对比
还没完，接下来介绍的这个知识想必绝大多数人都不知道，那就是<output>元素也支持for属性，更关键的是<output>元素的for属性支持多个值。使用示意如下：
用来标示输出结果关联的表单元素。
在第2章讲<a>元素的rel属性的时候，曾提到空格分隔的HTML属性对象会是个DOMTokenList对象，例如Element.classList和HTMLAnchorElement.relList，问题来了，这里的<output>元素的for属性也支持多值，那么也会存在对象吗？
答案是肯定的，HTMLOutputElement.htmlFor返回的就是一个DOMTokenList对象，包括add()、remove()等一系列方法可以处理for属性值。
于是就出现了HTML世界中的一个奇观，对于同样的一个HTML属性，在<label>元素中返回的是字符串，在<output>元素中，返回的则是一个对象，如图3-29所示。
图3-29 <output>元素与众不同的for属性值
本节目前展示的所有代码和演示效果均可以通过在浏览器中输入地址https://www.htmlapi.cn/3/3-1.html或扫码访问来体验。
