checkbox的完美用户体验

最常见的 checkbox 的使用：

<input type="checkbox" name="test" />
<!--点击这里没有任何效果-->

因为 checkbox 在高分辨率下，小方块会很小，很不容易点，这难免在用户体验上大打折扣。

下面看看我们的解决方法：

checkbox

<input type="checkbox" id="test" name="test" />
<label for="test">点击这里就可以选中label</label>

for属性功能：表示 lable 标签要绑定的 HTML 元素，点击这个标签的时候，所绑定的元素将获取焦点。

补充

： 除以上方法，还可以直接用 label 套嵌整个表单组件和文本标签，如：

<label>
        <input type="checkbox" />点击这里就可以选中label
</label>

根据规范这样文本会自动与邻接的表单组件关联，但遗憾的是 IE 并不支持这个特性。

checkbox

<input type="checkbox" id="test" name="test" />
<label for="test" style="cursor:pointer">鼠标移到此处提示可点击，点击可选中label</label>

想起《大话西游里》唐僧的唠叨：“你想要啊？你要是想要的话你就说话嘛，你不说我怎么知道你想要呢，虽然你很有诚意地看着我，可是你还是要跟我说你想要的。你真的想要吗？那就拿去吧！你不是真的想要吧？难道你真的想要吗？…………”

这话说出了用户体验的精华，你不告诉用户，用户怎么知道这里能点击。所有我们需要给label加个属性（cursor:pointer）来告诉用户这里可以点击。

checkbox

<input type="checkbox" id="test" name="test" />
<label for="test" style="cursor:pointer" accesskey="1">鼠标移到此处提示可点击，点击可选中label，你也可以用键盘快捷方式来
        <span style="text-decoration:underline;">1</span>（Alt+1）来选择 checkbox
</label>

网站要兼顾更多类型的用户使用，比如某些从不使用鼠标，只使用键盘操作的用户，点击对于它们来说，已经没有任何意义，那我们该怎么做呢，最好的方法就是使用 label 的 accesskey 属性。

accesske属性功能：表示访问 lable 标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。注意： accesskey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。