label 的for属性总结

时间：2022-01-26 03:28:24

一、使用介绍

1. 定义：for属性规定label与哪个表单元素绑定。

<label>是专门为<input>元素服务的，为其定义标记。

label 和表单控件绑定方式有两种：

方法一：将表单控件作为label的内容，这种就是隐士绑定。

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

隐式绑定：

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

方法二：为label标签下的for属性命名一个目标表单的id，这种就是显示绑定。

显式绑定：

<label for="SSN">Social Security Number:</label>

<input type="text" name="SocSecNum" id="SSN" />

二、为什么要给label上面加上for属性

给 label 加了 for 属性绑定了input控件后，可以提高鼠标用户的用户体检。

如果在label 元素内点击文本，就会触发此控件，也就是说，当用户渲染该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

补充：

label 的 for属性给 select绑定 ，点击Male ，select只会闪下（自己测试的）：

<label for="male">Male</label>

    <select id="male">

        <option>1</option>

        <option>2</option>

        <option>3</option>

    </select>

    <label for="female">Female</label>

    <select>

        <option>一</option>

        <option>二</option>

        <option>三</option>

    </select>

html5给<label>新增了一个form属性来规定label所属的一个或多个表单，多个表单用空格分隔。

参考资料：http://www.cnblogs.com/starof/p/4545525.html

相关文章