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属性