html label标签的for属性有什么作用？关于label标签的for属性介绍

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

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

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

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

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

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

隐式绑定：

label>
    Date of Birth: input tyPE="text" name="DofB" />
    /label>
    

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

显式绑定：

label for="SSN">
    Social SecurITy Number:/label>
    input type="text" name="SocSecNum" id="SSN" />
    

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

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

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

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

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

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

div>
    label for="nan1">
    男/label>
    input type="checkbox" id="nan" />
    label for="nv">
    女/label>
    input type="checkbox" id="nv" />
    /div>
    

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

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

来看个html label标签的for属性实例

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

form action="demo_form.asp">
    label for="male">
    /label>
    input type="radio" name="sex" id="male" value="male"/>
    label for="female">
    html/label>
    input type="radio" name="sex" id="female" value="female"/>
    input type="submit" value="Submit"/>
    /form>
    

这个的效果如图：

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

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

【小编推荐】

html code标签怎么换行？这篇文章让你彻底了解code短语的用处

html tbody标签是块级元素吗？html tbody标签的基础用法

以上就是html label标签的for属性有什么作用？关于label标签的for属性介绍的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！