HTML宝典(第 1 版)
3.3.1 label控件
阅读(

HTML基础

HTML元素

表单及应用

什么是表单

Form元素

表单控件

label控件

顾名思义,label控件用来为每个表单元素添加有意义的描述,并且,单击它将导致相关联的表单元素获得焦点。因此, label控件可以优雅地扩大表单元素的点击区域,能够改善表单的易用性和可访问性。

比如,单纯的复选框,用户要点击那个小方框才能进行选择。由于这个点击区域本身很小,用户很难点击到合适的位置。如果使用 label 元素,用户就可以单击 label 元素来操作复选框,可以大大提升表单的可访问性和可用性。

label控件
图3-3 label控件

将 label控件与表单控件关联起来非常容易,并且有两种方式来实现:

一种是隐式关联,即把表单控件放在 label控件中,让 label控件包含表单控件,两个控件便会自动关联:

<label><input type="checkbox" value="1"/>10天内自动登录</label>

另一种是显式关联,即把 label控件 for 属性的值,设置为所要关联的表单控件的 id,两个控件就被显式地关联起来:

<input id="agree" type="checkbox" value="1"/>
<label for="agree">10天内自动登录</label>

显式关联对提升表单的可用性和可访问性都有帮助,假如访问者与标签有交互(如使用鼠标点击了标签),与之对应的表单控件就会获得焦点。

这种关联还可以让屏幕阅读器将文本标签与相应的控件一起念出来,这对不了解表单字段含义的视觉障碍用户来说是多么重要。因此,强烈建议在 label 元素中包含 for 属性。

说明:

在提升表单的可用性和可访问性方面,除了使用 label控件来扩大表单元素的点击区域,还可以通过 accesskey属性,为表单元素设置快捷键(不区分大小写)。这样的话,就可以通过键盘操作,让表单元素获得焦点,更加方便。如:

<input id="agree" accesskey="a" type="checkbox" value="1"/>
<label for="agree">10天内自动登录</label>

这样一来,当用通过鼠标户点击这个 label控件,或在键盘上同时按下 alt + a 键,都可以让 id="agree" 的文本输入控件获得焦点。

需要注意的是,accessKey属性所设置的快捷键,不能与浏览器的快捷键冲突,否则将优先激活浏览器的快捷键。

如果在CSS中,为 label 指定cursor: pointer;,当访问者指向标签时,就会显示为手形,而不是默认的箭头,就会提示用户这是一个可以操作的元素,也能提升表单的可用性和可访问性。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验