首先我们看看关于label标签的for属性介绍：

 

　　<label>专为input元素服务，为其定义标记。

 

　　for属性规定label与哪个表单元素绑定

 

　　label和表单控件绑定方式又两种：

 

　　1.将表单控件作为label的内容，这样就是隐士绑定。

 

　　此时不需要for属性，绑定的控件也不需要id属性。

 

　　隐式绑定：

 

　　<label>DateofBirth:<inputtype="text"name="DofB"/></label>

 

　　2.为<label>标签下的for属性命名一个目标表单的id，这就是显示绑定。

 

　　显式绑定：

 

　　<labelfor="SSN">SocialSecurityNumber:</label>

 

　　<inputtype="text"name="SocSecNum"id="SSN"/>

 

　　为什么要给<label>加上for属性？

 

　　给<label>加了for属性绑定了input控件后，可以提高鼠标用户的用户体验。

 

　　如果在label元素内点击文本，就会触发此控件。就是说，当用户渲染该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

 

　　还有关于htmllabel标签的for属性作用：

 

　　label标签的for属性的效果就是，鼠标点击“女”实现radio选中的效果，主要

 

　　归功于for=nv而且必须要求input文本框的id也等于nv，男这个radio作对比，没有这个效果

 

　　<div>

 

　　<labelfor="nan1">男</label>

 

　　<inputtype="checkbox"id="nan"/>

 

　　<labelfor="nv">女</label>

 

　　<inputtype="checkbox"id="nv"/>

 

　　</div>

 

　　代码在浏览器中显示的效果如图：

 

　　tuyi.png

 

　　图中是个可以多选的选框。大家都可以用着实验实验。

 

　　来看个htmllabel标签的for属性实例

 

　　拥有两个带有标签的单选按钮的表单：

 

　　<formaction="demo_form.asp">

 

　　<labelfor="male">php中文网</label>

 

　　<inputtype="radio"name="sex"id="male"value="male"/>

 

　　<labelfor="female">html</label>

 

　　<inputtype="radio"name="sex"id="female"value="female"/>

 

　　<inputtype="submit"value="Submit"/>

 

　　</form>

 

　　这个的效果如图：

 

　　tuer.png

 

　　这个图是个单选按钮，不能多选。

 

　　以上就是这篇文章的全部内容了，关于label标签的for属性内容，希望大家都能多多实践，要是不知道实践的地址，可以来PHP中文网，视频教程中的实战，那里面可以把你的代码复制上去看看效果。有问题的可以在下方提问。






本文转载自中文网