<label> 标签的作用

在HTML中<label>标签不会向用户展示任何特殊内容,它的作用是把自己与其他标签"绑定"起来，也可以说是与其他元素关联到一起，粗暴点说就是有一腿。

与其他标签关联的方式

<label>与其他元素关联的方式有两种

1、显式联系：显式联系通过<label>的 "for" 属性和目标标签的 ID 来完成

2、隐式联系：隐式联系可通过标签嵌套完成

显式联系

定义一个表单，表单中有单选框，看下面HTML代码

<form>

<input type="radio" name="yes-no" id="yes">确定

<input type="radio" name="yes-no" id="no">取消

</form>

运行结果

现在我们用显式的方式来为两个选项创建额外的"选择按钮"，接着上面代码写。

<form>

<input type="radio" name="yes-no" id="yes">

<input type="radio" name="yes-no" id="no">

</form> <br />

<label for="yes">点击这里也可选择确定选项</label> <br />

<label for="no">点击这里也可以选择取消选项</label> <br />

运行结果

从上面可以看到，我们通过点击<label>标签可以间接的选择表单中的选项了。

隐式联系

由于隐式联系不需要用标签的 ID 所以我把第一个例子中的表单代码中的<input>标签的ID去掉

<form>

<input type="text" name="yes-no">确定

<input type="text" name="yes-no">取消

</form>

运行结果

注意看，当我把鼠标移动到 "确定" 或 "取消" 时，鼠标变为了 "工" 形，是不可以点击的

现在我把<input>标签嵌套到<label>标签中

<form>

<label><input type="radio" name="yes-no">确定</label>

<label><input type="radio" name="yes-no">取消</label>

</form>

运行结果

从运行结果可以看到，我把鼠标移动到 "确定" 或 "取消" 上时，鼠标并没有改变样式，是可点击的。当我点击 "确定" "取消" 时，也可以把选项选上，这是因为我点击 "确定" "取消" 其实是点击了<label>，由于我们把<input>与<label>隐式关联了。所以达到了点击文字确定选项的效果。