checkbox的完美用户体验（转）

如需查看效果-->自行建个html文件，或者-->原文：http://bbs.blueidea.com/thread-2711834-1-7.html

最常见的checkbox的使用：

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

提示：您可以先修改部分代码再运行

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

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

1、给checkbox配个“老婆”（老婆的特点：必要的）：

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

提示：您可以先修改部分代码再运行

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

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

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

提示：您可以先修改部分代码再运行

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

2、给checkbox配个“小蜜”（小蜜的特点：更周到）：

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

提示：您可以先修改部分代码再运行

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

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

3、给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属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

相关文章阅读：

《各位大大行行好，给checkbox配个老婆（label）吧》：http://www.loaoao.com/blog/entry/14/

《label标签的使用》：http://www.planabc.net/article.asp?id=79

http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#access-keys

 

原文地址：http://bbs.blueidea.com/thread-2711834-1-7.html