HTML lable标签

最新推荐文章于 2025-07-25 17:42:53 发布

易安sparkle

最新推荐文章于 2025-07-25 17:42:53 发布

阅读量2.8w

点赞数 21

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_43675447/article/details/96423553

html 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了HTML中Label标签的定义与用法，包括如何为表单元素定义标注、两种关联方式及其优缺点，以及HTML5中新增的form属性等关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML < label> 定义与用法

< label> 标签为 input 元素定义标注（标记）
label 元素不会向用户呈现任何特殊效果。若在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
for属性可把 label 绑定到另外一个元素，< label> 标签的 for 属性应当与相关元素的 id 属性相同。

二、< label>和特定表单元素关联方式
1.显示关联
通过label标签的for属性，显式与另一个表单控件关联，for属性的值必须是与label标签在同一文档中的可标记表单元素的id
注：是id而不是name

爱好：
<input type='checkbox' name='basket' id='basketball'>   
<label for="basketball">篮球</label>
<input type='checkbox' name='football' id='football'>   
<label for="football">足球</label>

优点：减少标签嵌套层数；label标签和表单可以在不同的位置
缺点：控件需要定义id属性；label标签和表单控件不利于作为一个整体来控制

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

<label>点击我可使文本框获得焦点
    <input type='text' name='theinput' id='theinput'>
</label>

优点：控件无需定义id；标签和控件方便作为一个整体控制
缺点：增加了标签嵌套层数；不能将标签和关联控件放到不同的位置

三、HTML 5 < label> form 属性

form 属性规定 label 所属的一个或多个表单。
form 属性的值必须是其所属的表单的 id。
如需引用一个以上的表单，使用空格分隔的列表。

<!DOCTYPE HTML>
<html>
<body>
<form action="demo_form.asp" method="get" id="genderform">
	<label>Male
		<input type="radio" name="sex" id="male" value="male" />
	</label>
	<br />
	<label>Female
		<input type="radio" name="sex" id="female" value="female"  />
	</label>
	<input type="submit" value="提交" />
</form>

<p>用于第一个单选按钮的 label 位于 form 元素之外，但仍然是表单的一部分。请尝试点击这个 label，可以切换到 radio 控件。</p>

<label for="male" form="nameform">Male</label>
</body>
</html>