欢迎来到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代码