label标签

01、label标签

概述

label标签页属于:form元素的成员之一,它有啥意义呢?它主要用来修饰文本和form元素的指向和体验问题。我们只需要把文本和form元素使用label标签包裹,就可以产生一个奇妙的化学反应。就是:我们点击文本页可以让文本获取焦点。语法如下:

# 方式1
<label>文本:<input></label>
# 方式2
<label for="username">文本:<input type='text' id="username"></label>

代码

<!--重置按钮-->
<label for="username">用户名:<input  type="text" id="username" name="username" ></label>
<label for="password">密码:<input  type="text" id="password" name="password" ></label>

效果:

<!--文档类型:主要定义页面支持的标签类型,以及后续每个标签的命名,特征和行为-->
<!DOCTYPE html>
<!--整个页面的根元素-->
<html>
<!--页面的头部:主要用来设置浏览器解析页面时候的编码,头信息,页面描述、关键字,css样式列表引入和js引入,响应式规则等--><head><!--告诉浏览器解析网页的内容使用utf-8进行编码--><meta charset="utf-8"><!--响应式规则--><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--设置关键字和描述--><meta name="keywords" content="KuangStudy,KuangStudy文章,KuangStudy博客,KuangStudy论坛,KuangStudy学习,学相伴"><meta name="description" content="KuangStudy是一个致力于为每个想学习知识的人提供一个少走弯路的平台,包含优质体系课程、文章博客、专栏书写、技术论坛、资源下载等产品服务,提供有用、优质、完整内容的自学交流社区."><!--设置图标--><link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"><!--给浏览器的标签上显示标题,也可以作为网页收藏的文字--><title>form表单-label标签学习-学相伴</title>
</head><body><div class="container"><h1>学相伴登录</h1><form action="xxx" method="get"><p><label>账号:<input type="text" name="username" /></label></p><p><label>密码:<input type="password" name="password" /></label></p><p><input type="submit" value="提交"><input type="reset" value="重置"></p></form></div><hr><div class="container"><h1>学相伴登录</h1><form action="xxx" method="get"><p><label for="uname">账号:<input type="text" name="username" id="uname" /></label></p><p><label for="pwd">密码:<input type="password" name="password" id="pwd"/></label></p><p><input type="submit" value="提交"><input type="reset" value="重置"></p></form></div></body></html>

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

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

相关文章

在Spring中如何实现条件化Bean的创建?

在Spring中&#xff0c;实现条件化Bean的创建主要依靠Conditional注解&#xff0c;这个注解允许基于一定的条件来注册Bean。如果条件不满足&#xff0c;那么对应的Bean将不会被创建和注册到Spring的应用上下文中。 以下是如何使用Conditional注解来实现条件化Bean创建的步骤&a…

计算机网络错题答案汇总

王道学习 第1章 计算机网络体系结构 1.1 1.2

vue配置代理服务器解决跨域方法

一.vue配置代理服务器解决跨域方法一 过程如图&#xff1a; 1.在配置文件中设置代理服务器的地址 //vue.config.js module.exports{pages:{index:{// 入口entry:src/main.js,},},lintOnSave:false, //关闭语法检测// 开启代理服务器devServer:{proxy:http://localhost:8000//…

Java基础教程:算术运算符快速掌握

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…

SD-WAN简介

一、SD-WAN 定义概念 SD-WAN&#xff08;Software-Defined Wide Area Network&#xff09;&#xff0c;即软件定义广域网&#xff0c;代表了一种具有深远变革意义的网络技术架构和理念。 在传统广域网基础上的创新性演进&#xff0c;融合了软件定义网络&#xff08;SDN&#…

操作系统之银行家算法

目录 前言 银行家算法 定义 举例 策略 思路 结束语 前言 今天是坚持写博客的第16天&#xff0c;已经超过半个月了&#xff0c;希望可以继续坚持&#xff0c;不断积累与回顾&#xff0c;夯实基础知识体系的基础。我们今天来讲讲操作系统当中的另一个重要知识点——银行家…

vue2组件传参方法

一、父传子 1、$refs方法 <template><div class"father"><h1>我是父亲</h1><button click"getHeight">获取身高</button><ChildView ref"childRef"></ChildView></div> </template&…

MATLAB中扩展卡尔曼滤波误差估计的关键点

在MATLAB中&#xff0c;对于扩展卡尔曼滤波&#xff08;EKF&#xff09;的误差估计&#xff0c;主要涉及对系统状态估计的准确性和精度的评估。EKF是一种适用于非线性系统的状态估计方法&#xff0c;它通过递归的方式&#xff0c;结合系统的动态模型和观测模型&#xff0c;来预…

第4章:车辆的横向优化控制

4.1 车辆动力学模型 注1&#xff1a;运动学模型和动力学模型最大的不同点在于 运动学模型是在我们不考虑车辆的受力情况下建立的&#xff08;回顾我们推导出运动学模型的过程&#xff0c;我们没有使用到任何车辆所受的外力作为公式中的已知量&#xff0c;而是直接通过 “ 车速…

2024年BCSP-X小学高年级组初赛真题

一、单项选择题(共15题,每题2分,共计30分) 计算机在工作过程中突然停电,() 中的信息不会丢失。 A. 缓存 B. 寄存器 C. RAM D. ROM中级表达式a*(b+c)-d的后缀形式是( )。 A. a b c d * + - B. a b c + * d - C. a b c * + d - D. - + *a b c d设栈S的初始状态为空,元素a,b,c,d,e…

云计算-云基础设施的配置 (Provisioning Cloud Infrastructure)

AWS CloudFormation (AWS CloudFormation) 它是一项服务&#xff0c;允许我们自动建模和配置所需的AWS资源。可以使用模板来实现这一目的。这个模板基本上是用JSON或YAML格式编写的。AWS CloudFormation会根据模板描述的内容来实施资源的配置和管理。我们可以成组配置和管理一组…

华为交换机的基本配置

实验拓扑&#xff1a; 实验目的&#xff1a;认识二层交换机和二层交换技术的工作原理&#xff1b;认识三层交换和三层交换技术。 三层功能简而言之就是了具有路由的功能&#xff0c;设备可以充当网关和路由器。 实验要求&#xff1a;公司的两个部门用vlan进行划分&#xff0c…

vs中.\ 与 ..\ 区别

100编程书屋_孔夫子旧书网 在 Visual Studio 中&#xff0c;. 和 .. 是表示相对路径的两个特殊符号。 . 表示当前目录&#xff0c;例如&#xff1a;.\file.txt 表示当前目录下的文件 "file.txt"。 .. 表示上一级目录&#xff0c;例如&#xff1a;..\file.txt 表示上…

喵星人必备!福派斯三文鱼猫粮,营养满分!

猫粮品牌&#xff1a;福派斯三文鱼猫粮测评体验 在快节奏的都市生活中&#xff0c;我们的宠物猫也需要适应当下的生活环境&#xff0c;并保持健康和活力。作为一名合格的铲屎官&#xff0c;我们总是关心如何为猫咪提供既健康又美味的饮食。今天&#xff0c;我有幸为大家带来一…

测试计划中都包含哪些内容

测试目的和范围&#xff1a;要明确测试的目的&#xff0c;需要测试哪个功能&#xff1f;要测试哪个软件系统&#xff1f;测试的类型是什么&#xff0c;功能测试、性能测试还是接口测试&#xff0c;测试的阶段是什么&#xff1f;单元测试、集成测试还是系统测试&#xff0c;以及…

Harmony os Next——Retrofit网络库的使用和封装

这里写目录标题 Harmony os Next——Retrofit网络库的使用和封装描述Retrofit的使用BaseService部分功能使用GETPOST 创建拦截器创建实例全局封装 Harmony os Next——Retrofit网络库的使用和封装 描述 Retrofit作为Android平台最为常用的一个第三方网络库&#xff0c;搭配Ko…

【TensorFlow深度学习】循环神经网络RNN的基本结构与功能

循环神经网络RNN的基本结构与功能 循环神经网络&#xff08;RNN&#xff09;的基本结构与功能&#xff1a;时间序列数据的深度解析RNN的基本结构功能与应用场景代码示例&#xff1a;TensorFlow实现简单RNN结语 循环神经网络&#xff08;RNN&#xff09;的基本结构与功能&#x…

QT 如何在 QListWidget 的选项中插入自定义组件

有时我们需要 QListWidget 完成更复杂的操作&#xff0c;而不仅限于添加文本或者图标&#xff0c;那么就会使用到 setItemWidget 函数&#xff0c;但是这也会伴生一个问题&#xff0c;插入自定义组件后&#xff0c;QListWidget 对选项点击事件的获取会收到阻塞&#xff0c;因…

Docker安装启动Mysql

1、安装Docker&#xff08;省略&#xff09; 网上教程很多 2、下载Mysql5.7版本 docker pull mysql:5.7 3、查看镜像是够下载成功 docker images 4、启动镜像&#xff0c;生成容器 docker run --name mysql5.7 -p 13306:3306 -e MYSQL_ROOT_PASSWORD123456 -d mysql:5.7 5…

内网-2(代理)

一、代理概述 1、代理服务器(proxy server)&#xff1a;代理网络用户去取得网络信息&#xff0c;介于浏览器与web服务器之间的一条服务器。 注&#xff1a;为了方便&#xff0c;以下用B来代表浏览器的主机&#xff0c;S来代表服务器的主机。 2、正向代理和反向代理 正向代…