label标签的可访问性问题

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标签之下。也不要使用看上去更保险的“双管齐下”的方法。

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