HTMLlabel标签⽤法介绍
1. label标签说明
在html中，<label>标签通常和<input>标签⼀起使⽤，标签为input元素定义标注（标记）。它不会向⽤户呈现任何特殊UI效果，和span标签类似，但是与span的区别是它为⿏标⽤户改进了可⽤性，可以关联特定的表单控件。
label标签和特定表单控件关联之后，当⽤户点击标签中的⽂本时，浏览器就会⾃动将焦点转到和该标签相关联的控件上。
2. 适⽤范围
所有类型的input标签，select标签以及textarea标签
3. label标签格式
label标签的关联⽅式主要有两种，显式关联和隐式关联
3.1 显式关联
html span 居中
通过label标签的for属性与指定表单元素的id绑定来实现关联表单
⽰例：
<label for="name">姓名</label>
<input type="text"id="name">
<label for="age">年龄</label>
<input type="number"id="age">
<span>性别</span>
<input type="radio"id="boy"name="age"value="男">
<label for="boy">男</label>
<input type="radio"id="girl"name="age"value="⼥">
<label for="girl">⼥</label>
3.2 隐式关联
隐式关联是直接将表单控件放到label标签内，这种情况下，label标签只能包含⼀个表单元素，如果包含多个只对第⼀个有效。
⽰例：
<label >点击获取input焦点
<input type="text">
</label>
<label >点击获取textarea焦点
<textarea></textarea>
</label>
4. 总结
⽅式优点
显式关联
1：减少标签嵌套层数
2：label标签和表单可以在不同的位置
隐式关联
1：控件⽆需定义id
2：标签和控件⽅便作为⼀个整体控制

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。