HTMLHTML 表单 ③ ( label 标签 | 增大表单触发面积 | label 标签包含表单 | 通过 label 标签的 for 属性控制触发表单 )

Posted 2023-03-05 韩曙亮

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTMLHTML 表单 ③ ( label 标签 | 增大表单触发面积 | label 标签包含表单 | 通过 label 标签的 for 属性控制触发表单 )相关的知识，希望对你有一定的参考价值。

文章目录

一、label 标签
- 1、label 标签包含表单 ( 增大表单触发面积 )
- 2、通过 label 标签的 for 属性控制触发表单 ( 增大表单触发面积 )

一、label 标签

label 标签不属于表单 , 但是经常与表单 input 标签一起使用 ;

使用 label 标签可以提高用户体验 ;

1、label 标签包含表单 ( 增大表单触发面积 )

使用 <label></label> 标签可以直接包含表单和相关文字信息 , 点击 label 标签的范围 , 就可以触发表单的操作 , 如 :

文本框触发光标输入 ,
复选框触发选中效果 ,
按钮触发点击效果 ;

默认情况下的文本框 , 只有选中文本框本身 , 才能触发输入 ;

将文本和文本框表单都放在 <label></label> 标签中 , 点击整个 label 标签 , 都会触发文本框输入 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- label 标签包含表单 -->
		<label>用户名 : <input type="text" value="请输入账号"/></label>
    </body>
</html>

展示效果 :

2、通过 label 标签的 for 属性控制触发表单 ( 增大表单触发面积 )

如果 label 标签不方便将表单包裹起来 , 可以使用如下方案增加表达触发面积 :

label 标签中 , 使用 for 属性 , 属性值为表单的 id 属性值 ;
表单标签中 , 使用 id 属性将表单进行标记 , 方便在 label 标签关联表单标签 ;

<label for="user">用户名 : </label>
<input type="text" value="请输入账号" id="user"/>

完整代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<label for="user">用户名 : </label>
		<input type="text" value="请输入账号" id="user"/>
    </body>
</html>

展示效果 :

以上是关于HTMLHTML 表单 ③ ( label 标签 | 增大表单触发面积 | label 标签包含表单 | 通过 label 标签的 for 属性控制触发表单 )的主要内容，如果未能解决你的问题，请参考以下文章

HTMLHTML 标签 ③ ( 文本格式化标签 | 加粗 | 斜体 | 下划线 | 删除线 | 标签属性 | 图像标签 | 图像标签属性 )

HTMLHTML 注册表单案例 ① ( 表格设置 | 设置表格位置和大小 | 设置表格标题 | 表单设置 | 表格中设置单选按钮 )

HTMLHTML 注册表单案例 ② ( 表格中的内容设置 | 下拉列表 | 输入文本框 | 复选框 | 文本域 | 图片按钮 | 链接 )