label标签可以优雅地扩大表单控件元素的点击区域。例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置。因此,label标签的使用对于提高页面的可用性可访问性是很有帮助的。
其实,它的样子就是
网易云课堂就是这么做的
还有其他的网站(盗图的,哈哈)我们一般有两种方法来优雅地扩展表单控件的点击区域。
- 其一是使用label标签包裹控件元素
- 另外的方法就是使用label标签的for属性与控件元素的id相关联。
这就意味着,我们可以有如下些做法:
- 使用for和id关联控件
- label标签包裹控件
- 双管齐下
基本上,在大部分浏览器下(IE6下label标签包裹控件的方法是不顶用的),三个方法都是可以扩大单行文本框控件的点击区域的(点击“标签”二字,文本框即focus)。
使用for和id找到控件元素的方法要比将控标件放在label签内的健壮性好很多。建议使用for + id方法,而不要因为懒得蛋疼乳酸,直接把控件元素套在label标签之下。也不要使用看上去更保险的“双管齐下”的方法。
整片博客内容是从 张鑫旭大神那里借鉴来的,—>_—>