label标签for属性与表单控件点击选中的联系（单选按钮为例）

表单中经常会出现单选按钮，也就是,但我们是否有注意到自己所写的单选按钮，能否在点击文字的时候进行选中切换。

其实这里面包含了一点点小窍门，也就是我们的标签

标签为input元素定义标记，其本身没有任何效果，但若在label元素内点击文本的话，就会触发此控件。所以，当用户选择标签时，浏览器就会自动将焦点转到和标签相关的控件上。

label与表单控件联系的方式有两种：

1.隐式联系--表单控件作为标记标签的内容

`

    <span>显式联系</span>
    <input type="radio" name="xs" id="xsTrue" />
    <label for="xsTrue">是</label>
    <input type="radio" name="xs" id="xsFalse" />
    <label for="xsFalse">否</label>
</div>`

2.显式联系--标记下的for属性命名目标表单id

`

    <span>隐式联系</span>
    <label>
        <input type="radio" name="ys" id="ysTrue" />是
    </label>
    <label>
        <input type="radio" name="ys" id="ysFalse" />否
    </label>
</div>`

我们给代码添加稍许样式
`form div span,
form div label {

display: inline-block;
width: 100px;
height: 55px;

}
form input[type="radio"],
form label {

cursor: pointer;

}`

下面，我们来看下代码显示的效果

经过验证，两种联系方式均是可以进行点击文字选中的，而且浏览器兼容没有问题！！

小小的表单点击文字的选中，也不能漏掉呢！好的用户体验要靠我们来加油！