首先，让我们看一下标签标签的for属性的介绍：

标签为输入元素服务，并为其定义标签。

for属性指定标签绑定到哪个表单元素

有两种方法可以绑定标签和表单控件：

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

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

隐式绑定：

labeldateofbirth : input type=' text ' name=' DofB '/label

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

显式绑定：

label for=' SSN ' social security number :/label

input type=' text ' name=' SocSecNum ' id=' SSN '/

为什么要在标签中添加for属性？

添加for属性进行标注和绑定输入控件后，可以改善鼠标用户的用户体验。

如果在标签元素内单击文本，则会触发此控件。也就是说，当用户呈现标签时，浏览器将自动将焦点转向与标签相关的表单控件。

还有htmllabel标记的for属性的功能：

标签标签的for属性的作用是鼠标点击“女”来达到单选的效果，主要是

由于for=nv且输入文本框的id必须等于nv，所以男电台的比较没有这个效果

差异

Labelfor='nan1 '男/标签

inputtype='checkbox'id='nan'/

Labelfor='nv '女/label

inputtype='checkbox'id='nv'/

/div

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

tuyi.png

图为多选框。每个人都可以用这个实验。

让我们来看一个htmllabel标签的for属性的例子

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

formaction='demo_form.asp '

Labelfor='男' php中文网站/标签

input type=' radio ' name=' sex ' id=' male ' value=' male '/

labelfor='女性' html/label

input type=' radio ' name=' sex ' id=' meeting ' value=' meeting '/

inputtype='submit '值='Submit'/

/form

其效果如图所示：

tuer.png

此图为单选按钮，不允许多选。

这就是本文的全部内容。希望大家多多练习标签的for属性。如果不知道练习的地址，可以来PHP中文网站，视频教程练习，可以复制代码看看效果。如果你有问题，可以在下面问。

本文转载自中文网站