首页 >web前端 >html教程 >html label标签的for属性有什么作用?关于label标签的for属性介绍

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

寻∝梦
寻∝梦原创
2018-09-04 15:50:5312838浏览

本篇文章主要介绍了关于html label标签的for属性的一些作用和使用的一些实例解释等,现在就让我们一起来看看这篇文章吧

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

2e1cf0710519d5598b1f0f14c36ba674专为input元素服务,为其定义标记。

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

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

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

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

隐式绑定:

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

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

显式绑定:

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

为什么要给2e1cf0710519d5598b1f0f14c36ba674加上for属性?

给2e1cf0710519d5598b1f0f14c36ba674加了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>

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

tuyi.png

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

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

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

<form action="demo_form.asp">
<label for="male">php中文网</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>

这个的效果如图:

tuer.png

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

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

【小编推荐】

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

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

以上是html label标签的for属性有什么作用?关于label标签的for属性介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn