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

韩曙亮

发布于 2023-03-30 19:12:06

3.7K00

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

文章目录

一、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>

展示效果 :