前端 - 基础 表单标签 - label 标签

#  label 标签 其实不属于 表单标签名单经常和 表单标签 搭配使用。 

#  <label> 标签 为 input 元素 定义 标注( 标签 ) 

使用场景  

#  其实说白,<label> 标签就是为了方便用户体验的,举例说明 

      

        就是说,如上示,我们在进行选项的选择操作时( 比如,男,女 ) 

        我们一般是直接点击 那个 圆圈,选中就代表了,选的男还是女了,选男就点击男前面的圆圈

        选女就点击 女前面的圆圈; 

        但是呢,那个小圆圈就又有点小,不太方便操作,所以,就想着,要是直接点击男或女

        那就更方便了,下面的 未婚,离异,丧偶也是如此~!! 

        所以,就是方便用户体验的操作~!! 

#   <label> 标签用于绑定一个 表单元素,当点击<label> 标签内的文本时,浏览器就会自动将

     焦点(光标) 转到或者选择对应的表单元素上,用来增加用户体验~!!

语法规范  

<label   for="sex">男</label>

<input   type="radio"   name="sex"   id="sex" /> 

 这是牵扯两方面的事情 

     因为点击的是 label 标签 里的文字,但是受益的是 表单 

     所以  label 里 写了一个 for 属性 =   一个名字 ; 

     相对应的  input 表单 有一个 id 属性,也有一个名字;

     并且 要求 这两个名字 必须 保持一致,是相同的; 这样 两方面 就建立连接了,就对上暗号

      

     核心 : <label>  标签的 for 属性 应与 相关元素的   id  属性相同 。 ( 里面的值要一样 ) 

示例 : 

            

             for 里的值和 id 里的值 要保持一致,在上示中,我们写的是  text ,你也可以提写其它的,

             只要保持一致即可 ~!! 

             ===>>>

            

            点击 用户名,即可在 方框里 直接输入 ~!!! 

           

           ===>>>

           

            直接点击 “男”  这个文字,就勾选上了 ~!!! 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/602.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux下使用qt+mpv调用GPU硬件解码

linux下GPU硬件解码接口&#xff0c;常用的有vdpau和vaapi。 mpv是基于mplayer开发的一个播放器。此外&#xff0c;mpv还提供了函数库libmpv&#xff0c;通过使用libmpv可以编写一个简单的播放器。 基于qtlibmpv的demo&#xff0c;官方例子代码如下&#xff1a;https://github.…

Quick Service Setup(快速服务设置)

Quick Service Setup界面使用户能够使用最少的参数快速配置和编辑简单的应用程序服务。Alteon自动为虚拟服务创建所需的对象(虚拟服务器、服务器组、真实服务器、SSL策略、FastView策略等)。通过快速服务设置&#xff0c;您可以配置HTTP, HTTPS&#xff0c;基本slb(第4层TCP或U…

Python-VBA函数之旅-classmethod函数

目录 一、装饰器的定义&#xff1a; 二、装饰器类型&#xff1a; 三、装饰器的主要用途&#xff1a; 四、classmethod常用场景&#xff1a; 1、classmethod函数&#xff1a; 1-1、Python&#xff1a; 1-2、VBA&#xff1a; 2、相关文章&#xff1a; classmethod是 Pyth…

定时器详解

定时器&#xff1a;Timer类 常用方法方法&#xff1a; 1.schedule(TimeTask timetask,long delay,(long period)): TimeTask&#xff1a;实现了Runnable类&#xff0c;实现时需要重写run方法 delay&#xff1a;表示延迟多少(decay)后开始执行任务&#xff0c;单位是毫秒&#x…

java算法day2

螺旋矩阵搜索插入位置查找元素第一个位置和最后一个位置 螺旋矩阵 解法&#xff1a;模拟&#xff0c;核心在于你怎么转&#xff0c;还有就是处理边界&#xff0c;边界如何收缩&#xff0c;什么时候停止旋转。最内圈的时候怎么处理。 通过上图的模拟来解决这个问题&#xff1a;…

SpringBoot-自定义注解AOP实现及拦截器示例

SpringBoot-自定义注解AOP实现及拦截器示例 一、四大元注解 当你在编写自定义注解时&#xff0c;Target、Retention、Documented 和 Inherited 是四个你可能会用到的元注解&#xff0c;它们可以帮助你更好地定义和使用注解。 1、Target Target 注解用于指定注解可以应用的程…

【科研入门】评价指标AUC原理及实践

评价指标AUC原理及实践 目录 评价指标AUC原理及实践一、二分类评估指标1.1 混淆矩阵1.2 准确率 Accuracy定义公式局限性 1.3 精确率 Precision 和 召回率 Recall定义公式 1.4 阈值定义阈值的调整 1.5 ROC与AUC引入定义公式理解AUC算法 一、二分类评估指标 1.1 混淆矩阵 对于二…

【muzzik 分享】关于 MKFramework 的设计想法

MKFramework是我个人维护持续了几年的项目&#xff08;虽然公开只有一年左右&#xff09;&#xff0c;最开始由于自己从事QP类游戏开发&#xff0c;我很喜欢MVVM&#xff0c;于是想把他做成 MVVM 框架&#xff0c;在论坛第一个 MVVM 框架出来的时候&#xff0c;我的框架已经快完…

电机控制专题(二)——Sensorless之扩展反电动势EEMF

文章目录 电机控制专题(二)——Sensorless之扩展反电动势EEMF前言理论推导仿真验证总结参考文献 电机控制专题(二)——Sensorless之扩展反电动势EEMF 前言 总结下电机控制中的扩展反电动势模型。 纯小白&#xff0c;如有不当&#xff0c;轻喷&#xff0c;还请指出。 在得出E…

synchronized锁升级原理

锁升级过程 jdk1.6之后的优化 synchronized锁有四种状态&#xff0c;无锁&#xff0c;偏向锁&#xff0c;轻量级锁&#xff0c;重量级锁&#xff0c;这几个状态会随着竞争状态逐渐升级&#xff0c;锁可以升级但不能降级&#xff0c;但是偏向锁状态可以被重置为无锁状态。 1、偏…

深入挖掘C语言 ---- 文件操作

目录 1. 文件的打开和关闭1.1 流和标准流1.1.1流1.1.2标准流 1.2 文件指针1.3 文件的打开和关闭 2. 顺序读写3. 随机读写3.1 fseek3.2 ftell3.3 rewind 4. 读取结束判定 正文开始 1. 文件的打开和关闭 1.1 流和标准流 1.1.1流 我们程序的数据需要输出到各种外部设备, 也需要…

CentOS7升级openssl

文章目录 一 系统环境二 操作步骤三 版本检查 一 系统环境 公司服务器等保要求&#xff0c;修复openssl的高危漏洞。 本机使用centos7.9系统&#xff0c;openssl版本是1.0.2k&#xff0c;计划升级到1.1.1q 在执行下列操作前&#xff0c;务必要打快照做好备份&#xff0c;以防升…

浮点数随机生成器

浅做了一个数值模拟器&#xff0c;支持自定义多路数据模拟。数据源支持浮点型、整形等多种类型&#xff0c;通讯支持网口和串口&#xff0c;支持指定协议。简略效果大概如下&#xff0c;后续可能会考虑开源~ [code] 浮点数生成器 #include <iostream> #include <ra…

Scala 04 —— 函数式编程底层逻辑

函数式编程 底层逻辑 该文章来自2023/1/14的清华大学交叉信息学院助理教授——袁洋演讲。 文章目录 函数式编程 底层逻辑函数式编程假如...副作用是必须的&#xff1f;函数的定义函数是数据的函数&#xff0c;不是数字的函数如何把业务逻辑做成纯函数式&#xff1f;函数式编程…

【python】直接在python3下安装 jupyter notebook,以及处理安装报错,启动不了问题

目录 问题&#xff1a; 1 先做准备&#xff0c;查看环境 1.1 先看python3 和pip &#xff0c;以及查看是否有 juypter 1.2 开始安装 1.3 安装完成后得到警告和报错 2 处理安装的报错问题 2.1 网上有说是因为 pip 自身需要更新&#xff0c;更新之 2.1.1 更新pip 2.1.…

Redis搭建主从

Redis搭建主从: 1:拉取Redis镜像 docker pull redis2:创建主从对应的目录结构 3:对redis6379.log,redis6380.log,redis6381.log进行授权 chmod 777 redis6379.log chmod 777 redis6380.log chmod 777 redis6381.log4:修改主(master)的配置文件 5:创建主(master) redis_6379 …

docker部署java项目,如何docker-compose内的jdk版本与本地版本保持一致

目录结构 /var └── data├── docker-compose.yml └── docker├── Dockerfile└── jdk-8u401-linux-x64.tar.gzdockerfile文件 FROM ubuntu:latest# 拷贝本地服务器上的 JDK 安装包到 Docker 镜像中 COPY jdk-8u401-linux-x64.tar.gz /jdk-8u401-linux-x64.tar.g…

基于弹簧鞘复合纱和迁移学习算法的可穿戴人体重构和智能试衣系统

研究背景 在信息时代和元宇宙的背景下&#xff0c;虚拟服装设计对满足服装行业的个性化需求至关重要。与传统方法不同&#xff0c;虚拟试衣节省时间、方便客户&#xff0c;并提供多样化的款式。准确得测量人体围度并重构出人体的模型是虚拟试衣的关键。为了实现动态人体重构&a…

【面试经典 150 | 二叉树层序遍历】二叉树的右视图

文章目录 写在前面Tag题目来源解题思路方法一&#xff1a;层序遍历方法二&#xff1a;深度优先搜索 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于…

【Linux】进程和计划任务

目录 一、进程介绍 1.1 进程与线程的定义 1.1.1 进程(Process)** 1.1.2 线程(Thread)** 1.1.3 进程与线程的区别 1.2 进程的特征 1.3 进程状态 1.3.1 进程的基本状态 1.3.2 进程更多的状态 1.4 进程的优先级 1.5 进程间通信 1.6 进程的分类* 二、进程管理 2.1 查看…