表单[form]大攻略第二辑——关于label的补充

label的一个坑，你们肯定不知道【我瞎猜的】

首先，科普一下label和input的关系

1.隐式关联——即用for和id互相关联

<div class="password">
    <label for="password">密码</label>
    <input type="password" name="password" id="password" placeholder="请输入密码">
</div>

注意：label的for属性的值和input的id属性的值是一致的
ok，现在我们点击【密码】，password文本框直接就可以转换为可输入状态，增强了用户体验——这就是label和input关联的作用。
将password替换为其它input标签也可以有类似效果

2.显式关联——即用input内嵌于label实现关联

<div class="password">
    <label>密码
    <input type="password" name="password" placeholder="请输入密码">
    </label>
</div>

注意：此时label不再需要让for属性与input的id一致也可实现【隐式关联】的效果。

OK,今天要填的坑就和它们之间的【关联】有关

上面的例子里，都只有一个input。
如果在显式关联里，你在label里内嵌了多个input，会发生什么呢？

<div class="hobby2">
    <label>优点
        <input type="checkbox" name="hobby2" value="shuaiqi">帅气
        <input type="checkbox" name="bobby2" value="duojin">多金
        <input type="checkbox" name="bobby2" value="youcaihua">有才华
    </label>
</div>

点击查看代码演示
你点击优点字符——第一个复选框被选中
你点击多金字符——第一个复选框被选中
你点击有才华字符——第一个复选框又被选中

为什么呢？

因为这个时候，三个input都在label标签范围内，而input后跟随的字符此时都是label标签的字符，所以点击它们都会触发label的【显式关联】，而显式关联默认关联第一个内嵌的第一个标签——即[<input type="checkbox" name="hobby2" value="shuaiqi">]。

总结

我们可以总结出一个很容易被忽略的事情
在内嵌标签中
一定要注意！！在子元素外的字符都是属于父元素的！！！