前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >【HTML】HTML 表单 ③ ( label 标签 | 增大表单触发面积 | label 标签包含表单 | 通过 label 标签的 for 属性控制触发表单 )

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

作者头像
韩曙亮
发布2023-03-30 19:12:06
发布2023-03-30 19:12:06
3.7K00
代码可运行
举报
运行总次数:0
代码可运行

文章目录

一、label 标签


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

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

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

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

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

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

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

代码示例 :

代码语言:javascript
代码运行次数:0
运行
复制
<!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 标签关联表单标签 ;
代码语言:javascript
代码运行次数:0
运行
复制
<label for="user">用户名 : </label>
<input type="text" value="请输入账号" id="user"/>

完整代码示例 :

代码语言:javascript
代码运行次数:0
运行
复制
<!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>

展示效果 :

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-02-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 一、label 标签
    • 1、label 标签包含表单 ( 增大表单触发面积 )
    • 2、通过 label 标签的 for 属性控制触发表单 ( 增大表单触发面积 )
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档