首先我们看看关于label标签的for属性介绍:
专为input元素服务,为其定义标记。
for属性规定label与哪个表单元素绑定
label和表单控件绑定方式又两种:
1.将表单控件作为label的内容,这样就是隐士绑定。
此时不需要for属性,绑定的控件也不需要id属性。
隐式绑定:
DateofBirth:
2.为标签下的for属性命名一个目标表单的id,这就是显示绑定。
显式绑定:
SocialSecurityNumber:
为什么要给加上for属性?
给加了for属性绑定了input控件后,可以提高鼠标用户的用户体验。
如果在label元素内点击文本,就会触发此控件。就是说,当用户渲染该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
还有关于htmllabel标签的for属性作用:
label标签的for属性的效果就是,鼠标点击“女”实现radio选中的效果,主要
归功于for=nv而且必须要求input文本框的id也等于nv,男这个radio作对比,没有这个效果
男
女
代码在浏览器中显示的效果如图:
tuyi.png
图中是个可以多选的选框。大家都可以用着实验实验。
来看个htmllabel标签的for属性实例
拥有两个带有标签的单选按钮的表单:
php中文网
html
这个的效果如图:
tuer.png
这个图是个单选按钮,不能多选。
以上就是这篇文章的全部内容了,关于label标签的for属性内容,希望大家都能多多实践,要是不知道实践的地址,可以来PHP中文网,视频教程中的实战,那里面可以把你的代码复制上去看看效果。有问题的可以在下方提问。
本文转载自中文网