HTML——那些自带交互特征的HTML元素（label元素、fieldset元素、legend元素）

那些自带交互特征的HTML元素3、控件伴侣label元素3.1、label元素的价值所在3.1.1、产生关联的方式3.1.2、for属性的使用3.2、必学的单选按钮、复选框技术4、什么时候使用fieldset元素和legend元素4.1、表单分组与fieldset元素的使用4.2、特殊且唯一的边框样式4.3、fieldset元素的独家功能3、控件伴侣label元素虽然label元素的语义是“标签”​但是往往标签内容并没有使用label元素而是使用a元素然后使用reltag来表达语义。原因很简单标签内容通常包含一类信息的集合自带链接所以只能舍弃label元素。有人可能会有疑问那我可不可以像下面这样书写既保留了链接的功能又保留了“标签”的语义请别这样做这种用法很奇怪因为label元素和a元素都带有点击行为不建议混用。3.1、label元素的价值所在label元素可以看成一个“伴生”元素注意“伴生”这里打了引号旨在表明label元素并不是真的不能单独使用而是需要和其他元素产生关联才能体现其价值。那么是哪些元素呢第一类是传统的表单控件元素各类button、input、textarea和select等元素。第二类是在接下来几章会介绍的progress和meter元素。第三类就是非典型的表单元素output元素。除此之外没有任何使用label元素的理由当然对于非链接标签你硬要使用label元素也不会有人说什么​。与之相对如果遇到这些元素也务必使用label元素不少人在日常开发时并未注意到这一点比如一个登录表单往往会使用如下所示的HTML代码从视觉表现上讲你这么写没什么问题无论是布局还是样式都可以很好地还原设计稿但在交互体验方面还有进步的空间很简单将span元素换成label元素如下所示这样做有两点好处语义更精准类似屏幕阅读器这样的设备识别体验更好例如当用户专注于表单输入时屏幕阅读器将读出标签信息这样用户就更容易理解应该输入什么数据。优雅地扩大了输入框的响应区域这一点值得好好说一说。当label元素和表单控件元素产生关联的时候点击label元素表单元素会自动处于激活态。输入框表现为聚焦单选按钮和复选框表现为选中态切换。尤其是后者在用户体验层面极为受用因为单选按钮和复选框的点击区域都很小尤其在移动端很难一次就选中因此使用元素扩大点击区域就显得非常有必要。例如此时哪怕你点击文字复选框也会被选中如图所示。这是所有前端开发人员都务必知道的交互常识。3.1.1、产生关联的方式label元素和特定元素产生关联的方式有两种一种是通过特定的HTML属性另一种是通过HTML结构关系。通过HTML属性产生关联的方式就是使用for属性使其值等同于表单控件元素的id属性值例如通过HTML结构关系产生关联的方式就是将表单控件元素放在label元素之中例如以上两种方式在如今都是可以放心使用的。这里正好展开讲一下for属性。3.1.2、for属性的使用在HTML中for属性的值是不能使用elment.for这样的语法获取的因为for是个JavaScript关键字要使用htmlFor代替。例如下图所示就是上述代码在演示页面所在的控制台运行的结果。还没完接下来介绍的这个知识想必绝大多数人都不知道那就是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元素中返回的则是一个对象如图所示。本节目前展示的所有代码和演示效果均可以通过在浏览器中输入地址https://www.htmlapi.cn/3/3-1.html访问来体验。3.2、必学的单选按钮、复选框技术虽然在语义上label元素和progress元素、meter元素、output元素这三个元素有关联但在行为上却没有什么表现。唯一有点反应的就是让output元素变成可输入元素后例如设置contenteditable“true”​也是可以在label元素被点击后获得焦点的。不过很难想象会有什么场景需要让output元素变成可输入的因此对于这三个元素label元素使用与否意义不大我们不用在意不妨把注意力放在单选按钮和复选框这两个元素上和label元素配合使用可以迸发出强大的生命力。例如如图所示的支付金额选择效果你会怎么实现试试使用label元素可以无JavaScript实现我们所需要的交互效果核心实现思路如下。(1)将label元素作为点选的主体元素内部放置隐藏的单选按钮元素HTML代码示意如下此时点击label元素会自动触发内部单选按钮元素的选中态。(2)使用合适的CSS选择器匹配单选按钮的状态变化并设置对应的CSS样式。例如使用has()伪类于是完整的交互效果就实现了是非常健壮的实现。上述效果你可以通过在浏览器中输入地址https://www.htmlapi.cn/3/3-2.html访问来体验。如果不是想实现单选交互而是要实现AB状态来回切换的交互效果就像图所示的开关则可以使用inputepub:type“checkbox”复选框进行模拟由于两种交互效果的实现原理一致代码类似这里就不重复展示了。4、什么时候使用fieldset元素和legend元素有些元素你没用过并不表示这些元素没有用只是因为你了解得少不知道它们的价值所在。下面从语义、样式和功能三个角度介绍什么时候应该使用fieldset元素和legend元素。4.1、表单分组与fieldset元素的使用先从案例入手实现一个图3-32所示带有多个选择项的问答布局。一定有很多人会使用如下所示的HTML结构对于以视觉为主要感官的用户群体来讲上述代码的最终视觉呈现是没有问题的上面有问题信息下面有单选选项。但是对于以触摸为主的盲人用户上述代码就有问题。因为最开始的问题和下面的两个单选选项是有关联的或者说带有“组”的关系而上述HTML代码并未建立起对应的联系。此时当用户触摸移动端交互方式两个单选按钮的时候听到的仅仅是label元素中的“有”和“没有”两个词至于对应的问题是什么不得而知或者是触摸到了问题但是并不知道对应的选项是什么这时用户体验就不好。那么如何解决这个问题呢使用fieldset元素和legend元素HTML代码如下其中fieldset元素表示组的意思专门用在form表单元素中表示一组内容legend元素表示这个组的标题在这个例子中就是问题内容。此时再使用Tab键导航桌面端交互方式form表单单选按钮聚焦屏幕阅读识别​就会清晰读出“你有港澳通行证吗​”​。这样用户就能清楚地知道下面的“有”和“没有”对应的到底是什么就不会有困扰了。根据我使用桌面端VoiceOver现在叫作“旁白”​的实地测试结果聚焦并选中第二个单选项的时候朗读的内容是“没有已选择单选按钮第2项共2项​你有港澳通行证吗​组”​如图所示​是不是非常好理解​注意随着软件的升级迭代朗读的文本内容会有所变化。​图中fieldset和legend元素应用下的旁白朗读效果当然并不是说只要有表单就一定要使用fieldset元素和legend元素。那么什么时候需要使用什么时候不需要使用呢核心要点就是表单中的内容中有没有“分组”的概念例如要实现一个搜索输入框表单就没必要使用fieldset元素和legend元素但是类似于外卖或网购的收货地址的填写就非常适合使用它们因为省、市、区这三个下拉框和最后的详细地址输入框都属于“地址”这个主题案例如下4.2、特殊且唯一的边框样式虽然现在的CSS已经很强大了但是要实现一个图所示的样式效果还是很困难的。这种文字底部镂空、两侧有边框线的效果最简单的实现方式一定是使用fieldset元素和legend元素仅使用一行CSS代码即可实现该效果。如果我们希望legend元素里面的文字居中对齐而不是飘在左上角也非常简单像下面这样设置就可以了。此时效果如图所示。我们还可以进一步打开思路如果只保留上边框同时将边框样式改为虚线岂不就实现了一个宽度自适应的分隔线效果。此时的效果如图所示。上述边框或分隔线效果均可以在线体验在浏览器中输入地址https://www.htmlapi.cn/3/4-1.html访问即可。不过虽然使用legend元素模拟分隔线非常轻松但是这种做法并不推荐因为legend元素的语义是“标题”​而不是“分隔线”​。我更建议大家使用hr元素模拟分隔线。4.3、fieldset元素的独家功能除语义和样式外fieldset元素还有一个非常稀缺的功能就是可以批量禁用表单元素此能力只有fieldset元素才有。例如就这么简单此时fieldset元素里面的所有表单控件元素都无法输入同时可以匹配CSSdisabled伪类其效果和在每一个表单控件元素上设置disabled属性一样。不要使用CSS pointer-eventsnone声明禁用表单了也不要再使用HTML inert属性去禁用表单了这些方法只是表面上的禁用。下图所示的就是某个复杂表单使用fieldset元素批量禁用后的效果。上述效果你可以通过在浏览器中输入地址https://www.htmlapi.cn/3/4-2.html访问来体验。