<input type="checkbox" name="test" /> 点击这里没有任何效果
因为checkbox在高分辨率下,小方块会很小,很不容易点,这难免在用户体验上大打折扣。
下面看看我们的解决方法:
1、给checkbox配个label“老婆”(老婆的特点:必要的):
<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配个cursor:pointer“小蜜”(小蜜的特点:特周到):
<input type="checkbox" id="test" name="test" /><label for="test" style="cursor:pointer">鼠标移到此处提示可点击,点击可选中label</label>
想起《大话西游里》唐僧的唠叨:“你想要啊?你要是想要的话你就说话嘛,你不说我怎么知道你想要呢,虽然你很有诚意地看着我,可是你还是要跟我说你想要的。你真的想要吗?那就拿去吧!你不是真的想要吧?难道你真的想要吗?…………”
这话说出了用户体验的精华,你不告诉用户,用户怎么知道这里能点击。所有我们需要给label加个属性(cursor:pointer)来告诉用户这里可以点击。
3、给checkbox配个accesskey“情人”(情人的特点:可取代):
<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属性所设置的快捷键不能与浏览器的快捷键冲突,否则将优先激活浏览器的快捷键。
演示地址: http://www.planabc.net/demo/checkbox.html