利用 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>

 

 

总结：虽然看似作用不大，但是个人感觉还是不错的，算是增加了按钮的触发范围吧，也算是小小的提升了一下用户体验。:）