HTML5中label标签对input元素标注的使用方法

HTML <label> 标签：W3C标准

定义：

        <label> 标签为 input 元素定义标注（标记）。
        label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

用法：

        <label> 标签的 for 属性应当与相关元素的 id 属性相同。

        开发为了增强用户体验，涉及 input 元素中的 checkbox、radio等属性时，常用 label 标签来标注，使之点击到文字也能选中相应的单选、复选框等。

使用示例如下：

1.常规 input 使用

<input type="radio" name="demo" />单选1
	    <input type="radio" name="demo" />单选2
	    <input type="radio" name="demo" />单选3
	    <input type="radio" name="demo" />单选4
	    <input type="radio" name="demo" />单选5

        我们只有点击相应的圈圈才能选中，体验很不好。

2.使用 label 标签

<input type="radio" name="demo" id="temp1" /><label for="temp1">单选1</label>
	    <input type="radio" name="demo" id="temp2" /><label for="temp2">单选2</label>
	    <input type="radio" name="demo" id="temp3" /><label for="temp3">单选3</label>
	    <input type="radio" name="demo" id="temp4" /><label for="temp4">单选4</label>
	    <input type="radio" name="demo" id="temp5" /><label for="temp5">单选5</label>

        我们给 input 框设置相应的 id ，label 标签的 for 属性必须对应相应的id。这样当我们点击相应的文字时也是可以被选中的，所以这样的 input 框大大增加了用户体验性。

3.使用 label 嵌套式标签

<label><input type="radio" name="demo" />单选1</label>
	    <label><input type="radio" name="demo" />单选2</label>
	    <label><input type="radio" name="demo" />单选3</label>
	    <label><input type="radio" name="demo" />单选4</label>
	    <label><input type="radio" name="demo" />单选5</label>

        为了开发效率我们可以使用第3种，以嵌套的方式来使用，这样我们不用为设置 id 名字而发愁，也不用设置 label 标签中的 for 属性了。