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
checkbox的完美用户体验(转)的更多相关文章
- 提升用户体验的最佳免费 jQuery 表单插件
网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...
- CSS3新特性应用之用户体验
一.光标 新增加not-allowed光标,不允许访问 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:none即可. 完整代码: curosr: u ...
- WTF Forms – 使用 CSS 实现用户体验更好的表单
WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome.Safari 和 Firefox 浏览器.以文件输入控件的改进,使用 label 包裹在 i ...
- web设计经验<二>设计华丽的用户体验的6个热门技巧
你是否曾经下载了一个应用,却发现它“很难使用”?对于大多数智能手机用户来说,答案是肯定的. 有趣的是,每四个手机应用中就有一个应用在下载后被“打入冷宫”. 如果一个应用能够吸引一个人下载并且打开它,但 ...
- 全面产品管理-从细微处认识"用户体验"
转载: 让我以一个故事开始本文,我觉得这个故事能概括大多数人听到“用户体验”这个术语时的想法. 我经常访问的一个财经网站给我发了一封电子邮件,请求我点击里面的一个链接,对一些信息进行审核.所以我就点了 ...
- vs2010 使用SignalR 提高B2C商城用户体验(三)
vs2010 使用SignalR 提高B2C商城用户体验(三) 上一章节,我们的web即时通讯已经可以实现跨域了,但针对我们的需求,还希望,一些客户端程序可以和我们的web用户,在线聊天,所以到Sig ...
- 提升网站用户体验—WebP 图片的高效使用
一.WebP 的由来 现代图像压缩技术对我们的生活方式影响很大.数码相机能将上千张高质量图片存储到一张内存卡里.智能手机可以与邻近设备快速分享高分辨率的图片.网站与手机等移动设备能快速展示各种富媒体. ...
- 提示用户体验的最佳免费 Jquery 表单插件
网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...
- (转)iOS Wow体验 - 第二章 - iOS用户体验解析(1)
本文是<iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad>第二章译文精选的第一部分,其余章节将陆续放出.上一 ...
随机推荐
- Solr学习笔记之2、集成IK中文分词器
Solr学习笔记之2.集成IK中文分词器 一.下载IK中文分词器 IK中文分词器 此文IK版本:IK Analyer 2012-FF hotfix 1 完整分发包 二.在Solr中集成IK中文分词器 ...
- Apache Spark源码走读之9 -- Spark源码编译
欢迎转载,转载请注明出处,徽沪一郎. 概要 本来源码编译没有什么可说的,对于java项目来说,只要会点maven或ant的简单命令,依葫芦画瓢,一下子就ok了.但到了Spark上面,事情似乎不这么简单 ...
- js 模拟ajax方式提交数据
html页面 <script>function LocaluploadCallback(msg) { document.getElementById("f_localup ...
- Mac OS X 中安装JDK 7
通过Mac系统的更新安装Java的版本均为JDK 6的版本,如果想要在Mac上安装JDK 7,就需要到Oracle的网站上去下载相应的安装包. 下面为详细教程: 最新版本为JDK8,目前需求JDK7够 ...
- 【翻译】Kinect v2程序设计(C++) Body 篇
Kinect SDK v2预览版的主要功能的使用介绍,基本上完成了.这次,是关于取得Body(人体姿势)方法的说明. 上一节,是使用Kinect SDK v2预览版从Kinect v2预览版取得B ...
- 【IOS笔记】Delegation
Delegation Delegation is a simple and powerful pattern in which one object in a program acts on beha ...
- intervention/image intervention/imagecache
http://image.intervention.io/ 安装两个包 composer require intervention/image composer require interventio ...
- communication between threads 线程间通信 Programming Concurrent Activities 程序设计中的并发活动 Ada task 任务 Java thread 线程
Computer Science An Overview _J. Glenn Brookshear _11th Edition activation 激活 parallel processing 并行 ...
- java笔记--关于线程同步(5种同步方式)【转】
为何要使用同步? java允许多线程并发控制,当多个线程同时操作一个可共享的资源变量时(如数据的增删改查), 将会导致数据不准确,相互之间产生冲突,因此加入同步锁以避免在该线程没有完 ...
- spring环境的搭建及作用和定义<一>
问题?spring的定义及作用.spring的环境搭建 一.spring的定义及作用 1.spring由Rod Johnson创建的一个开源框架,它是为了解决企业应用开发的复杂性而创建的.框架的主要优 ...