label标签可以优雅地扩大表单控件元素的点击区域。例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置。因此,label标签的使用对于提高页面的可用性可访问性是很有帮助的。

其实,它的样子就是

网易云课堂就是这么做的



还有其他的网站(盗图的,哈哈)

我们一般有两种方法来优雅地扩展表单控件的点击区域。

  1. 其一是使用label标签包裹控件元素
  2. 另外的方法就是使用label标签的for属性与控件元素的id相关联。

这就意味着,我们可以有如下些做法:

  • 使用for和id关联控件
<p>
<label for="test">标签</label>
<input name="input" type="text" id="test" />
</p>
  • label标签包裹控件
<p>
<label>标签 <input name="input" type="text" /></label>
</p>
  • 双管齐下
<p>
<label for="test2">标签 <input name="input" type="text" id="test2" /></label>
</p>

基本上,在大部分浏览器下(IE6下label标签包裹控件的方法是不顶用的),三个方法都是可以扩大单行文本框控件的点击区域的(点击“标签”二字,文本框即focus)。

使用for和id找到控件元素的方法要比将控标件放在label签内的健壮性好很多。建议使用for + id方法,而不要因为懒得蛋疼乳酸,直接把控件元素套在label标签之下。也不要使用看上去更保险的“双管齐下”的方法。

整片博客内容是从 张鑫旭大神那里借鉴来的,—>_—>

label标签的可访问性问题的更多相关文章

  1. 说说HTML5中label标签的可访问性问题——张鑫旭

    一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...

  2. label标签的可访问性

    与表单元素关联的方法(IE6下label标签包裹控件的方法是不顶用的): 1 使用for和id关联控件 <p><label for="test">标签< ...

  3. web标准的可用性和可访问性

    在Web前端开发界,有三个词经常被提及:可用性(Usability).可访问性(Accessibility)和可维护性(Maintainability). 可用性指的是:产品是否容易上手,用户能否完成 ...

  4. 可点击的icon按钮 无障碍 ARIA 可访问性

    最简单: <input type="image" src="email.png" width="14" height="14 ...

  5. 什么是web标准、可用性、可访问性

    前言:大家不难发现,只要是招聘UED相关的岗位,如前端开发工程师.交互设计师.用户研究员甚至视觉设计师,一般都对web标准.可用性和可访问性的理解有要求.那么到底什么是web标准.可用性.可访问性呢? ...

  6. web标准,可用性和可访问性

    web标准,简单的说,是指html,css,JavaScript三者的分离. 网页由三部分组成:结构,表现和行为.对应的标准分为三方面: 1.结构化标准语言XHTML和XML2.表现标准语言主要包括c ...

  7. web标准、可用性、可访问性

    前言:大家不难发现,只要是招聘UED相关的岗位,如前端开发工程师.交互设计师.用户研究员甚至视觉设计师,一般都对web标准.可用性和可访问性的理解有要求.那么到底什么是web标准.可用性.可访问性呢? ...

  8. 对Web标准的理解。可用性和可访问性

    一Web标准 简单的说,就是HTML.CSS.JavaScript这三者分离.WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentat ...

  9. 第7天:input和label标签

    今天学的不多,就只学了表单元素中的input和label标签.搬了房子,收拾了一下东西,太累了,所以没有学很多.明天还上班,今天就先到这. 一.input input标签type属性有以下几个:tex ...

随机推荐

  1. Neo4j沙盒实验申请过程步骤(图文详解)

    不多说,直接上干货! 参考博客 http://blog.csdn.net/u012318074/article/details/72793632    (对此表示感谢) 前期博客 我暂时是将Neo4j ...

  2. Python3之时间模块详述

    Python3之时间模块  time & datetime & calendar 一. 概述 python 提供很多方式处理日期与时间,转换日期格式是一个常见的功能. 时间元组:很多p ...

  3. (转载)解决切换Fragment时布局重新实例化

    解决切换Fragment时布局重新实例化 作者 instanceof 关注 2015.12.30 17:25* 字数 628 阅读 7616评论 17喜欢 23 关于Fragment 在这简单说一下F ...

  4. K3内部表数据名称

    在后台数据库ICClassType表中,字段FID<0的是老单,FID>0的是新单.----------------系统设置------------------------FStatus: ...

  5. failed to push some refs to 'git@github.com:RocsSun/mytest.git

    Git推送到GitHub仓库失败 使用Git将文件推送至GitHub的远程仓库时,报错failed to push some refs to 'git@github.com:RocsSun/mytes ...

  6. nefu 84 ( 拓展欧几里德模板题 )

    链接:传送门 思路:拓展欧几里德模板题,设大圣至少翻转 t 次,大圣起始位置为 x ,大圣目标位置为 y + n * s ( 大圣到达目标位置 y 可能需要多圈,所以用 s 来表示圈数 ),因为只能逆 ...

  7. [洛谷P3697]开心派对小火车

    题目:洛谷P3697 题目大意是有各站停列车(慢车,相邻2站时间A)和特急列车(相邻2站时间B),特急列车在特定站点停靠. 现在加一种快速列车(相邻2站时间C,A>C>B),停靠K站(包括 ...

  8. HDU 5763 Another Meaning (KMP/哈希+DP)

    题目大意:给你两个串,一长一短,如果长串中某个子串和短串完全相同,则这个子串可以被替换成"#",求长串所有的表达形式....... 比如"hehehehe"和& ...

  9. qt quick中qml编程语言

    Qt QML 入门 — 使用C++定义QML类型 发表于 2013 年 3 月 11 日   注册C++类 注册可实例化的类型 注册不实例化的QML类型 附带属性 注册C++类 注册可实例化的类型 如 ...

  10. 通过rpm安装jdk

    通过rpm安装,安装在/usr/local 1 .编辑系统环境变量 vi /etc/profile 输入i 加入内容如下: export JAVA_HOME=/usr/local/jdk1.7.0_7 ...