label标签用法

chun

2021-11-28

前端笔记

1. label标签说明

在html中，<label>标签通常和<input>标签一起使用，标签为input元素定义标注（标记）。它不会向用户呈现任何特殊UI效果，和span标签类似，但是与span的区别是它为鼠标用户改进了可用性，可以关联特定的表单控件。

label标签和特定表单控件关联之后，当用户点击标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上。

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

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>

2 隐式关联

隐式关联是直接将表单控件放到label标签内，这种情况下，label标签只能包含一个表单元素，如果包含多个只对第一个有效。

<label >点击获取input焦点
    <input type="text">
</label>

<label >点击获取textarea焦点
    <textarea></textarea>
</label>

阅读剩余

作者：chun

链接：https://chun53.top/1015.html

文章版权归作者所有，未经允许请勿转载。

THE END