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

HTML#5表单标签

news 文章来源：https://blog.csdn.net/guaiwu_/article/details/129240116 2024/11/26 0:28:14

一. 表单标签

  1. 介绍

表单: 在网页中主要负责数据采集功能,使用<form>标签定义表单

表单项: 不同类型的input元素, 下拉列表, 文本域

<form> 定义表单

<input> 定义表单项,通过typr属性控制输入形式

<label> 为表单项定义标注

<select> 定义下拉列表

<option> 定义下拉列表的列表项

<textarea> 定义文本域

form: 定义表单

属性 action: 规定当提交表单时向何处发送表单数据, URL

属性 method: 规定用于发送表单数据的方式

get: 浏览器会将数据直接附在表单的 action URL之后,大小有限制

post: 浏览器会将数据放到http请求信息体重,大小无限制

  1. 代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单标签</title>
</head>
<body><form action="#" method="get"><input type="text" name="username"><input type="submit"></form>
</body>
</html>
  1. 效果展示

在框中输入guaiwu提交之后

二. 表单项标签

  1. 介绍

<input>: 表单项, 通过type属性控制形式

<select>: 定义下拉列表 <option> 定义列表项

<textarea>: 文本域

type的取值 描述

text 默认值,定义单行的输入字段

password 定义密码字段

radio 定义单选按钮

checkbox 定义复选框

file 定义文件上传按钮

hidden 定义隐藏输入字段

submit 定义提交按钮,提交按钮会将表单数据提交到服务器

reset 定义重置按钮,重置按钮会清除表单中的所有数据

button 定义可点击按钮

  1. 代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单标签</title>
</head>
<body><form action="#" method="post"><input type="hidden" name="隐藏字段:" value="123456"><label for="username">用户名: </label><input type="text" name="username" id="username"><br><label for="password">密码: </label><input type="password" name="password" id="password"><br>性别:<input type="radio" name="gender" value="1" id="male"><label for="male">男</label><input type="radio" name="gender" value="2" id="female"><label for="female">女</label><br>爱好:<input type="checkbox" name="hobby" value="1">跑步<input type="checkbox" name="hobby" value="2">打乒乓球<input type="checkbox" name="hobby" value="3">打羽毛球<br>头像:<input type="file" ><br>城市:<select><option>广州</option><option>深圳</option><option>上海</option><option>北京</option></select><br><input type="submit" value="注册"><input type="reset" value="重置"><input type="button" value="按钮"></form>
</body>
</html>
  1. 效果展示

相关文章：

HTML#5表单标签

一. 表单标签介绍表单: 在网页中主要负责数据采集功能,使用<form>标签定义表单表单项: 不同类型的input元素, 下拉列表, 文本域<form> 定义表单<input> 定义表单项,通过typr属性控制输入形式<label> 为表单项定义标注<select> 定义下拉列表<o…...

编程日记 2023/2/28 10:31:29

ONNX可视化与编辑工具

ONNX可视化与编辑工具netrononnx-modifier在模型部署的过程中&#xff0c;需要使用到ONNX模型&#xff0c;下面给大家推荐两个ONNX可视化与编辑工具&#xff0c;其中&#xff0c;netron仅支持模型的可视化&#xff0c;onnx-modifier支持ONNX的可视化与编辑。 netron Netron是…...

编程日记 2023/2/28 10:30:20

Verilog 学习第五节（串口接收部分）

小梅哥串口部分学习part2 串口通信接收原理串口通信接收程序设计与调试巧用位操作优化串口接收逻辑设计串口接收模块的项目应用案例串口通信接收原理 在采样的时候没有必要一直判断一个clk内全部都是高/低电平&#xff0c;如果采用直接对中间点进行判断的话&#xff0c;很有可能…...

编程日记 2023/2/28 10:28:54

AIX系统常见漏洞修复（exec、rlogin、rsh、ftp、telnet远端服务运行中）

漏洞&#xff1a;1.1 SSH 服务支持弱加密算法 1. 使用telnet 登录2.vi /etc/ssh/sshd_config 最后添加一下内容&#xff08;去掉 arcfour、arcfour128、arcfour256 等弱加密算法&#xff09; Ciphers aes128-ctr,aes192-ctr,aes256-ctr,aes128-cbc,3des-cbc,blowfish-cbc,cast…...

编程日记 2023/2/28 10:27:19

IEEE SLT 2022论文丨如何利用x-vectors提升语音鉴伪系统性能？

分享一篇IEEE SLT 2022收录的声纹识别方向的论文&#xff0c;《HOW TO BOOST ANTI-SPOOFING WITH X-VECTORS》由AuroraLab&#xff08;极光实验室&#xff09;发表。 来源丨AuroraLab AuroraLab源自清华大学电子工程系与新疆大学信息科学与工程学院&#xff0c;以说话人识别和…...

编程日记 2023/2/28 10:25:45

设计模式(十三)----结构型模式之桥接模式

1 概述 现在有一个需求&#xff0c;需要创建不同的图形&#xff0c;并且每个图形都有可能会有不同的颜色。我们可以利用继承的方式来设计类的关系&#xff1a; 我们可以发现有很多的类&#xff0c;假如我们再增加一个形状或再增加一种颜色&#xff0c;就需要创建更多的类。 试…...

编程日记 2023/2/28 10:23:50

倾向得分匹配案例分析

一、倾向得分匹配法说明 倾向得分匹配模型是由Rosenbaum和Rubin在1983年提出的&#xff0c;首次运用在生物医药领域&#xff0c;后来被广泛运用在药物治疗、计量研究、政策实施评价等领域。倾向得分匹配模型主要用来解决非处理因素&#xff08;干扰因素&#xff09;的偏差。 …...

编程日记 2023/2/28 10:22:34

基于SpringCloud的可靠消息最终一致性04：项目基础代码

上一节给出了项目需求和骨架代码，这一节来接着看基础代码。骨架代码和基础代码最主要的区别是：骨架代码都是数据库脚本、POM依赖文件、配置文件内容、运维脚本等，而基础代码则是和业务有关联，但并非关键代码的部分。 这些代码不用一个个地看，主要是看看结构就行。 图二十五…...

编程日记 2023/2/28 10:21:23

操作系统权限提升(十八)之Linux提权-内核提权

Linux 内核提权 Linux 内核提权原理 内核提权是利用Linux内核的漏洞进行提权的&#xff0c;内核漏洞进行提权一般包括三个环节&#xff1a; 1、对目标系统进行信息收集&#xff0c;获取到系统内核信息及版本信息&#xff1b; 2、根据内核版本获取其对应的漏洞以及EXP 3、使…...

编程日记 2023/2/28 10:20:06

华为OD机试真题Java实现【快递运输】真题+解题思路+代码（20222023

快递运输 题目 一辆运送快递的货车，运送的快递均放在大小不等的长方体快递盒中，为了能够装载更多的快递，同时不能让货车超载，需要计算最多能装多少个快递。 注：快递的体积不受限制，快递数最多1000个，货车载重最大50000。 🔥🔥🔥🔥🔥👉👉👉👉👉�…...

编程日记 2023/2/28 10:18:55

java面试题-JVM问题排查

1.常见的Linux定位问题的工具&#xff1f;常见的 Linux 定位问题的命令可以分为以下几类&#xff1a;系统状态命令&#xff1a;包括 top、uptime、vmstat、sar 等命令&#xff0c;用于查看系统整体的状态&#xff0c;如 CPU 使用率、内存使用率、磁盘 I/O 等。进程状态命令&…...

编程日记 2023/2/28 10:17:29

市场上有很多低代码开发平台，不懂编程的人可以用哪些？

市场上有很多低代码开发平台&#xff0c;不懂编程的人可以用哪些&#xff1f;这个问题一看就是外行问的啦&#xff0c;低代码平台主打的就是一个“全民开发”&#xff0c;而且现在很多低代码平台都发展为零代码了&#xff0c;不懂编程也完全可以使用&#xff01; 所谓低代码开…...

编程日记 2023/2/28 10:16:15

Tina_Linux打包流程说明指南_new

OpenRemoved_Tina_Linux_打包流程_说明指南_new 1 概述 1.1 编写目的 介绍Allwinner 平台上打包流程。 1.2 适用范围 Allwinner 软件平台Tina v3.0 版本以上。 1.3 相关人员 适用Tina 平台的广大客户&#xff0c;想了解Tina 打包流程的开发人员。 2 固件打包简介 固件…...

编程日记 2023/2/28 10:14:49

JVM面试题

JVM 1.jvm的组成部分 类加载器:将javac编译的class文件加载到内存中 运行时数据区&#xff1a;将内存划分成若干个不同的区域。 执行引擎&#xff1a;负责解析命令&#xff0c;提交操作系统执行。 本地接口&#xff1a;融合不同的语言为java所用 2.运行时数据区 方法区&…...

编程日记 2023/2/28 10:13:42

@FeignClient注解

1.在启动类上开启Feign功能 不开会提示找不到所需要的bean Consider defining a bean of type in your configuration SpringBootApplication EnableFeignClients public class AuthApplication {public static void main(String[] args) {SpringApplication.run(AuthApplic…...

编程日记 2023/2/28 10:12:36

一文搞懂如何在 React 中使用 防抖（Debounce）和 节流（Throttle）

在前端的日常开发中&#xff0c;经常会使用到两个函数防抖&#xff08;Debounce&#xff09;和节流&#xff08;Throttle&#xff09;&#xff0c;防抖函数可以有效控制在一段时间内只执行最后一次请求&#xff0c;例如搜索框输入时&#xff0c;只在输入完成后才进行请求接口。…...

编程日记 2023/2/28 10:11:30

Airbyte API

Airbyte API涵盖了Airbyte功能的方方面面&#xff0c;主要分类&#xff1a;Source_definition&#xff1a;来源定义&#xff0c;实现了来源的增删改查功能。Destination_definition&#xff1a;目标定义&#xff0c;实现了目标的增删改查功能。Workspace&#xff1a;工作区管理…...

编程日记 2023/2/28 10:10:18

vue项目使用Electron开发桌面应用

添加npm配置避免安装Electron错误 请确保您的 node 版本大于等于 18. cmd运行&#xff1a; npm config edit 该命令会打开npm的配置文件&#xff0c;请在空白处添加&#xff1a; electron_builder_binaries_mirrorhttps://npmmirror.com/mirrors/electron-builder-binaries/ e…...

编程日记 2023/2/28 10:09:08

std::chrono笔记

文章目录1. radio原型作用示例2. duration原型&#xff1a;作用示例3. time_point原型作用示例4. clockssystem_clock示例steady_clock示例high_resolution_clock先说感觉&#xff0c;这个库真恶心&#xff0c;刚接触感觉跟shi一样&#xff0c;特别是那个命名空间&#xff0c;太…...

编程日记 2023/2/28 10:07:59

接收arp请求并发送回应的实例

本文简单介绍了arp协议，用一个实例查看收到的ARP请求，并对该请求发出ARP回应，实例有完整的源代码，使用C语言在Linux下实现，代码中有详细的注释。 1. ARP协议 ARP(Address Resolution Protocol)，地址解析协议；在局域网上通过IP地址获取物理地址MAC的协议，该协议工作在数…...

编程日记 2023/2/28 10:06:52

【高性能计算】TVM使用TE手动优化矩阵乘法算法解析与代码解读

引言 注&#xff1a;本文主要介绍、解释TVM的矩阵优化思想、代码&#xff0c;需要配合代码注释一起阅读。 矩阵乘法是计算密集型运算。为了获得良好的 CPU 性能&#xff0c;有两个重要的优化措施&#xff1a; 提高内存访问的高速缓存命中率。复杂的数值计算和热点内存&#x…...

编程日记 2023/2/28 10:05:45

消息中间件的概念

中间件(middleware)是基础软件的一大类&#xff0c;属于可复用的软件范畴。中间件在操作系统软件&#xff0c;网络和数据库之上&#xff0c;应用软件之下&#xff0c;总的作用是为处于自己上层的应用软件提供运行于开发的环境&#xff0c;帮助用户灵活、高效的开发和集成复杂的…...

编程日记 2023/2/28 10:04:37

窃密恶意软件Raccoon最新样本Stealer v2分析

Raccoon 是一个恶意软件家族&#xff0c;2019 年来一直在地下犯罪论坛中以恶意软件即服务的身份进行售卖。2022 年 7 月&#xff0c;该恶意软件家族发布了 C 语言编写的新版本 Raccoon Stealer v2&#xff0c;打破了以往使用 C 开发的传统。 Raccoon 是一个信息窃密恶意软件&a…...

编程日记 2023/2/28 10:03:30

足球俱乐部管理系统

技术&#xff1a;Java、JSP等摘要&#xff1a;网站是一种主要的渠道。人们通过互联网快速、准确的发布信息、获取信息。而足球俱乐部是足球职业化、专业化的一个标志&#xff0c;是足球运动员以足球谋生时&#xff0c;所被聘用的机构&#xff0c;应运时代发展&#xff0c;规模、…...

编程日记 2023/2/28 10:02:24

2023上半年数学建模竞赛汇总(比赛时间、难易程度、含金量、竞赛官网)

1、美国大学生数学建模竞赛等级&#xff1a;国家级是否可跨校&#xff1a;否竞赛开始时间&#xff1a;2月17日~2月21日综合难度&#xff1a;⭐⭐⭐⭐ 竞赛含金量&#xff1a;⭐⭐⭐⭐⭐竞赛官网&#xff1a;https://www.comap.com/2、MathorCup高校数学建模挑战赛---大数据竞赛…...

编程日记 2023/2/28 10:01:19

【python学习笔记】：PHP7 Null合并运算符

在PHP7&#xff0c;一个新的功能&#xff0c;空合并运算符(??)已被引入。它被用来代替三元运算并与 isset()函数功能结合一起使用。如果它存在并且它不是空的&#xff0c;空合并运算符返回它的第一个操作数;否则返回第二个操作数。 示例 <?php// fetch the value of $_…...

编程日记 2023/2/28 10:00:14

数据结构与算法——3.时间复杂度分析1（概述）

前面我们已经介绍了&#xff0c;研究算法的最终目的是如何花费更少的时间&#xff0c;如何占用更少的内存去完成相同的需求&#xff0c;并且也通过案例演示了不同算法之间时间耗费和空间耗费上的差异&#xff0c;但我们并不能将时间占用和空间占用量化。因此&#xff0c;接下来…...

编程日记 2023/2/28 9:59:06

FPGA学习之日常工作复位电路

最近一个多月没有写博客了&#xff0c;然后最近工作中也遇到一个复位信号的问题。问题是这样的&#xff0c;关于外部复位信号&#xff0c;之前我们的处理方式都是通过PLL产生的Lock信号作为内部的复位信号。但是由于换到A54上面没有IP核&#xff0c;所以只有不用PLL&#xff0c…...

编程日记 2023/2/28 9:57:58

【洛谷 P1177】【模板】快速排序 题解（快速排序+指针）

【模板】快速排序 题目描述 利用快速排序算法将读入的 NNN 个数从小到大排序后输出。 快速排序是信息学竞赛的必备算法之一。对于快速排序不是很了解的同学可以自行上网查询相关资料&#xff0c;掌握后独立完成。&#xff08;C 选手请不要试图使用 STL&#xff0c;虽然你可以…...

编程日记 2023/2/28 9:56:52

Pthon--自动化实用技巧篇--文件目录处理

为什么要讲这一篇&#xff0c;主要是因为这个在自动化测试框架或者脚本的编写的时候会用到&#xff0c;还是比较方便的。看上述两个函数。getcwd()、chdir()。使用 os.getcwd() 函数获得当前工作目录。使用 os.chdir()函数改变当前工作目录。所以在用chdir()函数的时候别忘记指…...

编程日记 2023/2/28 9:55:46

吉林长春有做网站的吗/万能推广app

原文地址:http://casatwy.com/iosying-yong-jia-gou-tan-wang-luo-ceng-she-ji-fang-an.html iOS应用架构谈 开篇 iOS应用架构谈 view层的组织和调用方案iOS应用架构谈 网络层设计方案iOS应用架构谈 动态部署方案 iOS应用架构谈 本地持久化方案前言 网络层在一个App中也是一个不…...

编程日记 2024/11/25 23:28:19

wordpress网站目录/今日军事新闻头条视频

GIT本地回退版本并且更新远程仓库 当不小心向远程仓库比如github做了一次错误的提交&#xff0c;想使本地和仓库回到某一个历史版本怎么办&#xff1f; 首先根据提交记录找到你想要回到的commit id&#xff08;版本号&#xff09; 然后回退到这个版本 git reset --hard 3628164…...

编程日记 2024/11/25 20:44:19

做门户网站用什么程序/链接平台

进入终端首先是这样的&#xff1a; 要输入cd /才能进入根目录&#xff1a; 然后即可通过ls查看文件了&#xff1a;...

编程日记 2024/11/25 19:59:51

wordpress vip会员主题/seo发贴软件

如图 8‑28所示为某公司的员工基本信息表&#xff0c;如何快速地统计各部门的男女比例&#xff1f; 图8‑28鸿商公司员工基本信息表 解决方案 创建数据透视表&#xff0c;使用数据透视表值显示方式中的“行汇总的百分比”。 操作方法 行汇总的百分比 步骤1 创建数据…...

编程日记 2024/11/25 17:17:20

ps一级二级调色大片的区别/百度关键词seo排名

在/usr/share/application/文件夹下&#xff0c;用vim新建一个 eclipse.desktop 的文件&#xff0c;文件内容如下&#xff0c;具体路径根据自己的实际情况而定&#xff1a; [Desktop Entry] TypeApplication Nameeclipse Exec/home/hou/eclips/eclipse //eclipse存放路径 Gene…...

编程日记 2024/11/25 15:53:38

怎么做网站文字优化/促销活动推广语言

在使用ajks时&#xff0c;json是经常使用的一种数据&#xff0c;我对它了解的也不是很透彻&#xff0c;但在这里想要分享一下最近答辩中我使用它的一种形式&#xff0c;当然这是一种很笨的方法。 我希望在访问网上书店时&#xff0c;主页里有一些分类&#xff0c;点击不同的分类…...

编程日记 2024/11/25 12:26:50