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

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

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

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

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

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

<div>
<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

<div>
<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;
}

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

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

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