html标签label的for属性
时间:2010-10-10 来源:忧忧夏天
背景:
群里的一个同学在问代码如下:
<p>label里的for跟input里的id有啥关系,我也楞住了,看来基础不行啊...于是就google了下。
<label for="code">员工编号(*):</label>
<input id="code" name="code" type="text" />
</p>
介绍:
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>
结果:
当鼠标点击文字的时候对应关联的选择框和输入框就被选中了。
相关阅读 更多 +