首页 > 代码库 > 利用 Label 小小的提升一下用户体验
利用 Label 小小的提升一下用户体验
label ，Html 标签里面很普通的一个，可是她却有一个很独特的作用，我不知道我是忘了她还是不曾记得她，下面简单介绍一下她。
一、定义和用法
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的"for" 属性可把 label 绑定到另外一个元素，请把 "for" 属性的值设置为相关元素的 id 属性的值。
二、浏览器支持
所有主流浏览器都支持 <label> 标签。
Safari 2 或更早的版本不支持 <label> 标签。
三、实例
<div> <label><input type="radio" name="sex"/>点击文字即可选择->男</label> <label><input type="radio" name="sex"/>不用刻意去点击按钮->女</label> <br /><br /> <label><input type="checkbox" name="taste"/>checkbox也支持->咸</label> <label><input type="checkbox" name="taste"/>checkbox也支持->淡</label> <br /><br /> <span><input type="radio" name="nsex"/>span标签就没有这效果->不男</span> <span><input type="radio" name="nsex"/>span标签就没有这效果->不女</span> <br /><br /> <b><input type="checkbox" name="ntaste"/>b标签也没有这效果->不咸</b> <b><input type="checkbox" name="ntaste"/>b标签也没有这效果->不淡</b> <br /><br /> <label for="ren3"> 点击知道屌丝类型->指定绑定某个值(纯属恶搞，请勿在意)<br/><br/> <input id="ren1" type="checkbox" name="peopleType"/>男妹子 <input id="ren2" type="checkbox" name="peopleType"/>女汉子 <input id="ren3" type="radio" name="peopleType" />程序猿 <input id="ren4" type="radio" name="peopleType"/>程序媛 </label> </div>
总结：虽然看似作用不大，但是个人感觉还是不错的，算是增加了按钮的触发范围吧，也算是小小的提升了一下用户体验。:）
感谢您怀着耐心看完整篇博文！！！
如果文章有什么错误或不当之处，请您斧正！
您有任何意见或者建议，您可以给我发邮件，也可以在下面留言，我看到了会第一时间回复您的，谢谢！
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。