HTML_label标签

1、概念

• label 标签为 input 元素定义标记
• label 元素不会呈现任何特殊效果

2、作用

• 为鼠标用户改进了可用性，用户体验较好

3、实例

• label 标签的 for 属性应当与相关元素的 id 属性相同
  因为label的for属性，它为label指定了一个目标，一般是一个form表单内元素的id，这样就可以把这个label与该id 元素关联起来，当点击label内的文本时，就会触发此控件，让该id也获得焦点

• 原始代码

 <input type="radio" name="demo" value="1"/>选项1
 <input type="radio" name="demo" value="2"/>选项2

• 效果：一定要点击单选的圆圈上，才能选中
• 改进代码

 <input type="radio" id="demo1" name="demo" value="1"/>
<label for="demo1">选项1</label>
 <input type="radio" id="demo2" name="demo" value="2"/>
<label for="demo2">选项2</label>

• 效果：只要点击了label里的文字，就可以选中

• 如果不想给label加for属性，也可以用label把input包起来

 <label><input type="radio" name="demo" value="1"/>选项1</label>
 <label><input type="radio" name="demo" value="2"/>选项2</label>

• 但推荐input与label分离的模式，因为这样更灵活，不受位置的约束，只要for 属性与相关的 id 属性相同就可以

参考文章中推荐：
容易被忽略的label标签
基础HTML： label标签的for属性