码迷,mamicode.com
首页 > 其他好文 > 详细

checkbox的完美用户体验(转)

时间:2016-08-01 19:03:42      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

如需查看效果-->自行建个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

checkbox的完美用户体验(转)

标签:

原文地址:http://www.cnblogs.com/ec04/p/5726602.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!