1. label标签说明

在html中,<label>标签通常和<input>标签一起使用,

它不会向用户呈现任何特殊UI效果,和span标签类似,但是与span的区别是它为鼠标用户改进了可用性,可以关联特定的表单控件。

label标签和特定表单控件关联之后,当用户点击

2. 适用范围

所有类型的input,select以及textarea标签

3. label标签格式

label标签的关联方式主要有两种,显式关联和隐式关联

3.1 显式关联

通过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:标签和控件方便作为一个整体控制

参考链接:https://blog.csdn.net/cyzfd_sunshine/article/details/85062399

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐