本篇文章主要介绍了关于html label标签的for属性的一些作用和使用的一些实例解释等，现在就让我们一起来看看这篇文章吧 首先我们看看关于label标签的for属性介绍： label专为input元素服
本篇文章主要介绍了关于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>
这个的效果如图：
这个图是个单选按钮，不能多选。