最常见的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

[ 本帖最后由 blankzheng 于 2007-1-10 14:59 编辑 ]

呵呵...一直在用..但是就没想到给他加指针  

[ 本帖最后由 chyf1982 于 2007-1-10 10:42 编辑 ]

顶·  实用的东东

精品;

谢谢斑竹加分，会经常写点实用的东西与大家一起分享！

不错不错，标准化就是个细节问题，大家多多练习细节上的设计，就会有更大的进步。老谈论理论干吗？又不出书。

不错，不过感觉到第二步就够了，哪有不用鼠标的人

引用:

原帖由 yeshan 于 2007-1-10 13:04 发表
不错，不过感觉到第二步就够了，哪有不用鼠标的人

中国可能少见，但老外中这种不用鼠标的人很多的，怪人比比皆是的

这种人还是少数，我的一条原则是网页设计要面向新手，用快捷键会增加新手的学习成本。

当然，这个例子应该没有这个问题，加上这个快捷键，恐怕用的人也不会多。

要照顾到所有人，毕竟机房没鼠标啊·····痛苦！

学到了好多
谢谢楼主

支持楼主在细节上下功夫，做出精品

－－－－－－－－－－－－－－－－－
报个错：在IE7下，快捷键失效

[ 本帖最后由 welcome58 于 2007-1-10 14:06 编辑 ]

文章写的不错哦！很有新意。
快捷键好是好就是浏览器老搞特殊。郁闷纳！

引用:

快捷键 ie6 里面是 alt + xxx
ff里面有 alt+shift +xxx
xxx只能有一位字符

[ 本帖最后由 mickeyboy 于 2007-1-10 14:50 编辑 ]

引用:

原帖由 mickeyboy 于 2007-1-10 14:47 发表
文章写的不错哦！很有新意。
快捷键好是好就是浏览器老搞特殊。郁闷纳！

同意楼上的，那说明标准还有发展的必要，比如统一快捷方式，嘿嘿……如果快捷方式加的是数字，比如本例子中，在FF使用小键盘的“1”是无效的，必须使用键盘上部分的数字！

很不错的帮助，我要用在目前的工作中，3克U

关于 Accesskey，在各个浏览器里面并不是统一是 alt + 1

比如在 IE 中需要多按一下 enter（如果是链接而不是checkbox的话），而在 Firefox 2.0 中默认则为 alt + shift + 1

收益非浅啊

呵呵。很不错，学习了哈。

oh  yeah 又长见识了
俺也引用一句大话西游的话" 悟空,你又吓我 "

不错，有意思！～

好文章 ,学习一下!

强人，学习下

<input>玩的这么好？！

引用:

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

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

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

ie7支持

不说不知道，还有这么多研究说法，一直都是用默认的！

这个……不能给分。
label的使用，对表单的用户体验是很好的。
accesskey用在快捷键上的。

不过整理总结了就不错的说~+1分，5分太多。

技术含量高，而且还用如此幽默的方式进行表述，妙哉，妙哉！

才发现自己挺2的，竟然用js写了个类似的功能，今天发现竟然这么简单就实现了。。
还有这个兼容性如何？快捷键在macx ff下无效

很好，都不知道label能这样做。谢谢