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

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.lryc.cn/news/546754.html

相关文章:

  • bge-large-zh-v1.5 与Pro/BAAI/bge-m3 区别
  • JVM常用概念之对象初始化的成本
  • [AI机器人] Web-AI-Robot机器人前瞻版--比奇堡海之霸凯伦
  • 嵌入式学习-EXTI外部中断
  • CSS—元素水平居中:2分钟掌握常用的水平居中
  • PyTorch 中结合迁移学习和强化学习的完整实现方案
  • 大语言模型学习--本地部署DeepSeek
  • Linux:vim快捷键
  • Unity 对象池技术
  • 算法1-4 凌乱的yyy / 线段覆盖
  • 【计网】数据链路层
  • javaweb自用笔记:Vue
  • CSS Overflow 属性详解
  • 沃丰科技结合DeepSeek大模型技术落地与应用前后效果对比
  • 突破光学成像局限:全视野光学血管造影技术新进展
  • 2.反向传播机制简述——大模型开发深度学习理论基础
  • 机器学习校招面经二
  • Spring Boot如何利用Twilio Verify 发送验证码短信?
  • 毕业项目推荐:基于yolov8/yolo11的苹果叶片病害检测识别系统(python+卷积神经网络)
  • Linux的用户与权限--第二天
  • 【Flink银行反欺诈系统设计方案】1.短时间内多次大额交易场景的flink与cep的实现
  • HashMap的table数组何时初始化?默认容量和扩容阈值是多少?
  • 基于CURL命令封装的JAVA通用HTTP工具
  • docker学习笔记(1)从安装docker到使用Portainer部署容器
  • 数据集/API 笔记:新加坡PSI(空气污染指数)API
  • 计算机网络数据传输探秘:包裹如何在数字世界旅行?
  • 笔记:代码随想录算法训练营day36:LeetCode1049. 最后一块石头的重量 II、494. 目标和、474.一和零
  • Bitmap -> Bitmap安卓设备上的显示和内存
  • QT study DAY2
  • QT-自定义参数设计框架软件