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. 移动端H5页面编辑器开发实战--经验技巧篇

    很久前的写的文章了,转载下发到这里 原本地址: https://blog.csdn.net/tech_meizu/article/details/52484775

  2. 如何在ubuntu中安装mysql与mysql workbench

    安装过程如下 sudo apt-get install mysql-server 安装过程中随后设置mysql的密码 之后sudo apt-get install mysql-client 安装好之后 ...

  3. Tomcat 初探(三)多项目部署

    起因 昨天房东找我说最近物价飞涨,要涨我房租,混不下去了,得要求老板涨工资.一大清早就去找老板,老板看了看我,让我发布先两个网站:一个前台网站 frontend,给用户用:一个后台管理网站 backe ...

  4. Android dex ,xml 文件反编译方法

    Dex 文件是Android上运行于delvik的java二进制文件,如果你对其中的内容感兴趣而开发人员没有公布源代码,你可以用如下方法反编译dex文件: 1 解压system.img 用xyaffs ...

  5. hdu 3549 Flow Problem 【最大流】

    其实还是不是很懂dinic----- 抄了一个模板--- http://www.cnblogs.com/naturepengchen/articles/4403408.html 先放在这里--- #i ...

  6. ZBrush中移动笔刷介绍

    移动笔刷是ZBrush®笔刷中举足轻重的一项,利用移动笔刷可以实现移动顶点的功能,还能改变模型的某一个点和某一位置.本文内容向大家介绍ZBrush®中移动笔刷以便大家熟悉它的用法和特性. 移动笔刷 可 ...

  7. ZBrush软件特性之Layers

    ZBrush®中的Layers层调控板可以在单个文档工作中添加多个层,实际上是把新建的层作为一个分离的文档,层之间可以相互影响. 使用层工作 Layers调控板为每个层都有预置存放的空间,刚启动ZBr ...

  8. 《图解HTTP》摘要

    网络基础TCP/IP 使用Cookie进行状态管理 HTTP首部 确保Web安全的HTTPS 1.网络基础TCP/IP 2.使用Cookie进行状态管理:HTTP是无状态协议. 3.HTTP首部 HT ...

  9. MySQL_索引原理与慢查询优化

    索引原理与慢查询优化 创建/删除索引的语法 #方法一:创建表时 CREATE TABLE 表名 ( 字段名1 数据类型 [完整性约束条件…], 字段名2 数据类型 [完整性约束条件…], [UNIQU ...

  10. 第十三章 Python并发编程

    并发编程之多进程 python中如果想要充分的利用多核CPU的资源,大部分情况需要使用多进程,python提供了multiprocessing multiprocessing模块用来开启子进程,并在子 ...