html标签label的for属性

背景：

　　群里的一个同学在问代码如下：

<p>
    <label for="code">员工编号(*)：</label>
    <input id="code" name="code"  type="text" />
</p>

label里的for跟input里的id有啥关系，我也楞住了，看来基础不行啊...于是就google了下。

介绍：

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

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

测试代码：

            <div>
                <label for="code">测试1</label>
                <input id="code" />
            </div>
            <div>
                <label >测试2</label>
                <input id="Text1" />
            </div>
            <div>
                <label for="nan">男</label>
                <input type="checkbox" id="nan" />
                 <label for="nv">女</label>
                <input type="checkbox" id="nv" />
            </div>

效果图：

　　

结果：

　　当鼠标点击文字的时候对应关联的选择框和输入框就被选中了。