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

HTML#5表单标签

news 2026/2/10 3:28:12

一. 表单标签

  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

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2026/2/8 20:43:02

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2026/1/25 3:21:09

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/2/8 10:51:42

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2026/2/6 7:30:33

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2026/1/22 20:46:43

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/2/8 3:32:52

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2026/1/26 13:35:42

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2026/1/31 8:53:50