前端 - 基础 表单标签 - 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,一经查实,立即删除!

相关文章

如何理解数据库事务

事务的概念起源于数据库系统的设计和实现。在计算机科学领域中&#xff0c;数据库系统被广泛用于存储和管理大量的数据&#xff0c;而事务的概念则是为了解决多用户并发访问数据库时可能出现的一系列问题。 事务的概念最早由 IBM 的科学家 Edgar F. Codd 在 1970 年提出。Codd…

如何在响应头中防治xss

在HTTP响应头中设置一些特定的安全策略可以帮助防止XSS&#xff08;跨站脚本&#xff09;攻击。以下是一些常用的HTTP响应头和它们的作用&#xff1a; Content-Security-Policy&#xff1a;这个响应头可以限制浏览器只加载和执行来自特定来源的脚本。例如&#xff0c;你可以设置…

力扣爆刷第123天之回溯五连刷

力扣爆刷第123天之回溯五连刷 文章目录 力扣爆刷第123天之回溯五连刷一、77. 组合二、216. 组合总和 III三、17. 电话号码的字母组合四、39. 组合总和五、40. 组合总和 II 一、77. 组合 题目链接&#xff1a;https://leetcode.cn/problems/combinations/description/ 思路&…

数据结构——6.4 图的应用

6.4 图的应用 概念 最小生成树 对于一个带权连通无向图G ( E)&#xff0c;生成树不同&#xff0c;每棵树的权(即树中所有边上的权值之和)也可能不同。设R为G的所有生成树的集合&#xff0c;若T为R中边的权值之和最小的生成树&#xff0c;则T称为G的最小生成树 (Minimum-Spanni…

【华为OD机试】跳马【C卷|200分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 马是象棋(包括中国象棋和国际象棋)中的棋子,走法是每步直一格再斜一格, 即先横着或者直者走一格,然后再斜着走一个对角线,可进可退,可越过河界,俗称"马走日"字。 给定 m…

如何在 Ubuntu 14.04 上更改 PHP 设置

简介 PHP 是一种服务器端脚本语言&#xff0c;被许多流行的 CMS 和博客平台如 WordPress 和 Drupal 所使用。它也是流行的 LAMP 和 LEMP 堆栈的一部分。更新 PHP 配置设置是设置基于 PHP 的网站时的常见任务。定位确切的 PHP 配置文件可能并不容易。通常在服务器上会有多个 PH…

弹性盒子(display: flex)布局

以下文章都可以参考 CSS - 完美解决 flex 布局下&#xff0c;一行显示固定个数&#xff08;平均分布&#xff09;并且强制换行&#xff0c;超出后 “靠左“ 对其&#xff08;详细解决方案&#xff0c;适用于 Web、Vue、React 等任何前端项目&#xff09;_flex设置一行几个-CSD…

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…

【运维篇#2】查看每个docker的日志量并且清除多余日志

文章目录 清除日志查看现在每个docker容器中的日志量 清除日志 #!/bin/bash echo " start clean docker containers logs " logs$(find /var/lib/docker/containers/ -name *-json.log) for log in $logsdoecho "clean logs : $log"cat /dev/null > $l…

【LeetCode热题100】【矩阵】旋转图像

题目链接&#xff1a;48. 旋转图像 - 力扣&#xff08;LeetCode&#xff09; 要将一个矩阵顺时针旋转90&#xff0c;数学公式是new[j][n-i-1]old[i][j]&#xff0c;要原地翻转的话&#xff0c;可以先水平翻转&#xff0c;即变成m[n-i-1][j]&#xff0c;再主对角线翻转&#xf…

定时器详解

定时器&#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;我的框架已经快完…

函数调用栈中的栈帧形成了一个链式结构

下面是一个简单的 C 示例&#xff0c;演示了函数调用栈的概念&#xff1a; #include <iostream>// 递归函数&#xff0c;计算阶乘 int factorial(int n) {if (n 0 || n 1) {return 1;} else {return n * factorial(n - 1); // 递归调用} }int main() {int result fac…

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

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

代码随想录算法训练营Day17 | 110.平衡二叉树、257. 二叉树的所有路径、404.左叶子之和 | Python | 个人记录向

本文目录 110.平衡二叉树做题看文章 257. 二叉树的所有路径做题看文章 404.左叶子之和做题看文章 以往忽略的知识点小结个人体会 110.平衡二叉树 代码随想录&#xff1a;110.平衡二叉树 Leetcode&#xff1a;110.平衡二叉树 做题 今天算是第一次用递归做出来了&#xff0c;之…