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;

}`

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

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

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