HTML label标签用法介绍

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

1. label标签说明

在html中，<label>标签通常和<input>标签一起使用，标签为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：标签和控件方便作为一个整体控制

HTML label标签用法介绍相关推荐

css中的label标签
在表单布局中会遇到label标签的使用,label没有任何样式效果,有触发对应表单控件功能. 比如我们点击单选按钮或多选框前文字对应选项就能被选中,这个就是对文字加了<label>标签实现 ...
dede php写法,dedecms {dede:php}标签用法引见
dedecms {dede:php}标签用法介绍最简单的输入如代码如下复制代码 {dede:php} $numA = 1; $numB = 2; echo $numA + $numB; {/de ...
①HTML介绍及标签用法
如果您对前端的其它内容的学习感兴趣,可以前往我的个人主页翻阅.具体专栏内容如下: HTML和CSS JavaScript jQuery Vue Vue3 React TypeScript uni- ...
java标签用法详解_介绍一个javaWeb自定义标签的用法详解
这篇文章主要介绍了javaWeb自定义标签用法,结合实例形式分析了javaweb自定义标签的功能.定义方法及执行原理,需要的朋友可以参考下本文实例讲述了javaWeb自定义标签用法.分享给大家供大家 ...
a jquery 标签点击不跳转_form标签的action属性怎么用？form标签action属性的用法介绍（附实例）...
本篇文章主要的介绍了关于HTML中form标签action属性的用法介绍和实例,还有关于form标签的action属性的定义和语法介绍,最后徐还有关于form标签的action属性的作用解释.现在让我 ...
HTML label标签介绍
label标签介绍 label标签为input元素定义标注(标记),它不会向用户呈现任何特殊效果,和span标签类似.但label标签和span标签最大的区别就是它为鼠标用户改进了可用性,可以关联特定 ...
lable标签的宽度_html中的label标签怎么设置高度？label标签的使用方法介绍
本篇文章主要的介绍的是关于HTML中的label标签设置高度的方法.还有关于HTML label标签的使用方法介绍.下面就让我们一起来看这篇关于html label标签的文章吧首先我们先来看看在ht ...
JS拼接字符串的过程中将JSON对象存到某个标签的属性中,encodeURIComponent(),btoa()用法介绍
JS拼接字符串的过程中将JSON对象存到某个标签的属性中 JS拼接字符串的过程中将JSON对象存到某个标签的属性中,encodeURIComponent(),btoa()用法介绍案例描述实现方法 ...
php中颜色的标签,HTMLfont标签的color属性是什么？fontcolor的用法介绍（附颜色代码表）...
HTML font标签的color属性是什么?font中color属性的用法介绍(附颜色代码表).本篇文章只要介绍的是html font标签的color属性的一些用法,还有关于html的颜色代码表详情 ...
form标签的action属性怎么用？form标签action属性的用法介绍（附实例）
本篇文章主要的介绍了关于HTML中form标签action属性的用法介绍和实例,还有关于form标签的action属性的定义和语法介绍,最后徐还有关于form标签的action属性的作用解释.现在让我 ...