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 >

效果图：

　　

结果：

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

转载于:https://www.cnblogs.com/xqhppt/archive/2010/10/10/1847360.html