label 标签的巧妙使用

欢迎来到Altaba的博客 2017年1月23日

关于label，标签，大家印象应该是表单中和input在一起绑定使用的，方便点击，这也是label的核心功能，首先，引用W3C的具体描叙，让不了解的童鞋先初步认识一下

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

咱在这篇文章是介绍label的巧妙使用，重点来了！

<input type="text" name="" id="text" /><label for="text">一个label，配文本框</label><br/>  

<input id="User3" type="radio" name="gender" value="3">    <label for="User3">label配radio</label>  

这样点击label里面的文字，text框获取到焦点，radio会被点击，非常方便

还可以这样嵌套包围实现

<label><input type="checkbox" name="aksd" id="aksd" />包围起来</label>

建议，不包围去使用，用其for属性指定到具体的表单元素，这样即使两个分割两地很远，也能绑定，况且：label包input的方法，在IE6下无效！所以建议不嵌套

巧妙使用：label不仅仅使用与表单，当你需要实现：点击一个图片或者文字A会触发另外一个B的点击事件，只要将label A的for指向B的ID，非常方便，会省去很多JS代码