当前位置: 首页 > article >正文

HTML label 标签使用

点击 <label> 标签通常会使与之关联的表单控件获得焦点或被激活。
通过正确使用 <label> 标签,可以使表单更加友好和易于使用,同时提高整体的可访问性。

基本用法

<label> 标签通过 for 属性与 id 为 username 的 <input> 元素关联。当用户点击“用户名:”这个标签时,关联的输入框会自动获得焦点。

<label for="username">用户名:</label>
<input type="text" id="username" name="username">

直接嵌套

<label>
  邮箱:
  <input type="email" name="email">
</label>

在这种情况下,点击“邮箱:”文本或文本框的任何部分都会激活文本框。

关联复选框和单选框

<label>
    <input type="checkbox" name="subscribe" value="newsletter">
    订阅新闻
</label>
<br>
性别:      
<input type="radio" name="sex" checked="checked" id="man" />
<label for="man"></label>
<input type="radio" name="sex" id="woman" />
<label for="woman"></label>	

在这里插入图片描述


http://www.kler.cn/a/571373.html

相关文章:

  • HttpServletRequest、ServerHttpRequest 和 ServerWebRequest作用详解
  • 【随手笔记】利尔达NB模组
  • jenkins流程概述
  • 计算机中的架构
  • 基于微信小程序的心理健康恢复系统+LW示例参考
  • 《深度学习进阶》第9集:自监督学习与无监督学习
  • react+vite+pnpm+ts基础项目搭建
  • 技术问题汇总:前端怎么往后端传一个日期?
  • 20250304学习记录
  • Stream在Swift 和 Flutter上的对比
  • 深入浅出C语言:第一步,理解 Hello World!
  • Visio 2021 专业版是微软推出的一款专业图表绘制工具 资源分享
  • AI赋能校园安全:科技助力预防与应对校园霸凌
  • 【暴力枚举】P2241 统计方形(数据加强版)
  • 四、Redis 事务与 Lua 脚本:深入解析与实战
  • 快速点位排查问题的方法
  • HTML前端手册
  • 第五天 Labview数据记录(5.2 Text文件读写)
  • 线程POSIX信号量/基于环形队列的⽣产消费模型
  • Docker安装Jaeger链路追踪平台