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

本篇文章主要介绍了关于html 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属性介绍的具体内容，更多请关注百分百源码网其它相关文章！