（10）＜label＞标签的用途

一、<label>标签的作用

所有的表单元素都可以通过绑定其他内容去扩大触发点击范围，也就是<label>标签它的作用就是扩大了选区范围，可以不只是单击表单元素才能被选中，还可以点击表单元素对应的文字内容进行选中该表单元素，浏览器会自自动将焦点转到和标签相关的表单控件上，帮助表单元素定义标注(标记)。

二、绑定方法

1.绑定方法一

绑定步骤：

1.给表单元素设置id属性

<form>
        <input type="radio" name="sex" id="man"> 男
        <input type="radio" name="sex" id="women"> 女
</form>

2.然后将需要绑定的其他内容用<label>标签包裹

<form>
        <input type="radio" name="sex" id="man"><label> 男</label>
        <input type="radio" name="sex" id="women"><label> 女</label>
</form>

3.给<label>标签设置for属性，属性值为绑定的表单元素的id属性值。

<form>
        <input type="radio" name="sex" id="man"><label for="man"> 男</label>
        <input type="radio" name="sex" id="women"><label for="women"> 女</label>
</form>

适用场景：绑定方式一实用于绑定距离较远的表单元素。

2.绑定方法二

适用场景：绑定方式二实用于表单元素与内容紧挨着时进行绑定。

绑定步骤：

1.如果绑定内容和表单元素写在一起，可以化简绑定写法，直接使用<label>标签将绑定内容与表单元素一起进行嵌套。

<form>
        <label><input type="radio" name="sex">男</label>
        <label><input type="radio" name="sex">女</label>
</form>

通过如上示例，我们看到，绑定方法二更加简洁，省去了给表单元素设置id和<label>标签的for属性绑定的步骤。