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

Html的表单标签。（Java程序员需要掌握的前端）

news 2026/2/5 7:05:35

表单标签

2.5.1 表单

2.5.1.1 介绍

那表单呢,在我们日常的上网的过程中,基本上每天都会遇到。比如，我们经常在访问网站时，出现的登录页面、注册页面、个人信息提交页面，其实都是一个一个的表单 。 当我们在这些表单中录入数据之后，一点击 “提交”，就会将表单中我们填写的数据采集到，并提交， 那其实这个数据呢，一般会提交到服务端，最终保存在数据库中 （后面的课程中会讲到）。

在这里插入图片描述

那其实，上述的整个窗口是一个表单，而表单是一项一项的，这个我们称为表单项 或 表单元素。

  • 表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。

  • 表单标签: <form>

  • 表单属性:

    • action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
    • method: 规定用于发送表单数据的方式，常见为： GET、POST。
      • GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
      • POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。

  • 表单项标签: 不同类型的input元素、下拉列表、文本域等。

    • input: 定义表单项，通过type属性控制输入形式
    • select: 定义下拉列表
    • textarea: 定义文本域
2.5.1.2 演示

1). GET方式提交的表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表单</title>
</head>
<body><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-->   <form action="" method="get">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>

表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12。

在这里插入图片描述

2). POST方式提交表单

将上述的表单提交方式由get，改为post

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表单</title>
</head>
<body><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-->   <form action="" method="post">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>

表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12。

在这里插入图片描述

2.5.1.3 注意事项

表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。 否则，无法提交该表单项。

用户名: <input type="text" name="username">

2.5.2 表单项

2.5.2.1 介绍

在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：

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

    type取值描述
    text默认值，定义单行的输入字段
    password定义密码字段
    radio定义单选按钮
    checkbox定义复选框
    file定义文件上传按钮
    date/time/datetime-local定义日期/时间/日期时间
    number定义数字输入框
    email定义邮件输入框
    hidden定义隐藏域
    submit / reset / button定义提交按钮 / 重置按钮 / 可点击按钮

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

  • <textarea>: 文本域

2.5.2.2 演示

创建一个新的表单项的html文件，具体内容如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表单项标签</title>
</head>
<body><!-- value: 表单项提交的值 -->
<form action="" method="post">姓名: <input type="text" name="name"> <br><br>密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>爱好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>图像: <input type="file" name="image">  <br><br>生日: <input type="date" name="birthday"> <br><br>时间: <input type="time" name="time"> <br><br>日期时间: <input type="datetime-local" name="datetime"> <br><br>邮箱: <input type="email" name="email"> <br><br>年龄: <input type="number" name="age"> <br><br>学历: <select name="degree"><option value="">----------- 请选择 -----------</option><option value="1">大专</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select>  <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br><input type="hidden" name="id" value="1"><!-- 表单常见按钮 --><input type="button" value="按钮"><input type="reset" value="重置"> <input type="submit" value="提交">   <br>
</form></body>
</html>

通过浏览器打开上述的表单项html文件，最终展示出的表单信息如下：

在这里插入图片描述

而对于input type=“hidden”，是一个隐藏域，在表单中并不会显示出来，但是在提交表单的时候，是会提交到服务端的。 接下来，我们就点击提交按钮，来提交当前表单，看看提交的数据：

在这里插入图片描述

相关文章：

Html的表单标签。（Java程序员需要掌握的前端）

表单标签 2.5.1 表单 2.5.1.1 介绍 那表单呢,在我们日常的上网的过程中,基本上每天都会遇到。比如&#xff0c;我们经常在访问网站时&#xff0c;出现的登录页面、注册页面、个人信息提交页面&#xff0c;其实都是一个一个的表单 。 当我们在这些表单中录入数据之后&#xf…...

编程日记 2024/6/30 19:04:33

Arduino (esp ) 下String的内存释放

在个人的开源项目 GitHub - StarCompute/tftziku: 这是一个通过单片机在各种屏幕上显示中文的解决方案 中为了方便快速检索使用了string&#xff0c;于是这个string在esp8266中占了40多k,原本以为当string设置为""的时候这个40k就可以回收&#xff0c;结果发觉不行…...

编程日记 2024/6/30 19:03:32

图灵虚拟机配置

导入虚拟机 点击新建&#xff0c;选择虚拟硬盘文件 环境机器.vmdk 配置网络...

编程日记 2024/6/30 19:02:31

【SQL常用日期函数（一）】

SQL 常用日期函数-基于impala 引擎 当前日期&#xff08;YYYY-MM-DD&#xff09; SELECT CURRENT_DATE(); -- 2024-06-30昨天 SELECT CURRENT_DATE(); -- 2024-06-30 SELECT CAST( DAYS_ADD(TO_DATE( CURRENT_DATE() ), -1 ) AS VARCHAR(10) ); -- 2024-06-29 SELECT CAST( …...

编程日记 2024/6/30 19:01:30

C++操作系列(二)：VSCode安装和配置C++开发环境

1. VSCode下载 进入VSCode的官网网页&#xff1a;Download Visual Studio Code - Mac, Linux, Windows 下载相应的版本&#xff1a; 2. 安装VSCode 安装到指定位置&#xff1a; 一路下一步&#xff0c;直至安装完成&#xff1a; 3. 安装C插件 3.1. 安装C/C 点击扩展图标&…...

编程日记 2024/6/30 18:59:27

【java12】java12新特性之File的mismatch方法

Java12引入了一个新的方法 mismatch&#xff0c;它属于java.nio.file.Files类。此方法用于比较两个文件的内容&#xff0c;并返回第一个不匹配字节的位置。如果两个文件完全相同&#xff0c;则返回-1。 Files.mismatch 方法声明 public static long mismatch(Path path1, Pat…...

编程日记 2024/6/30 18:57:24

uni-app （通过HBuilderX 和 VS Code 开发）详细连接过程教学。

使用 HBuilderX 创建 uni-app 项目 并编译到微信开发者工具。 uni-app 支持两种方式创建项目&#xff1a; 通过 HBuilderX 创建 通过命令行创建 首先我们需要先下载HBuilderX 下载链接地址&#xff1a;DCloud - HBuilder、HBuilderX、uni-app、uniapp、5、5plus、mui、wap2…...

编程日记 2024/6/30 18:53:21

安宝特方案 | AR术者培养：AR眼镜如何帮助医生从“看”到“做”？

每一种新药品的上市都需要通过大量的临床试验&#xff0c;而每一种新的手术工具在普及使用之前也需要经过反复的实践和验证。医疗器械公司都面临着这样的挑战&#xff1a;如何促使保守谨慎的医生从仅仅观察新工具在手术中的应用&#xff0c;转变为在实际手术中实操这项工具。安…...

编程日记 2024/6/30 18:51:18

20240628每日前端---------解决vue项目滥用watch

主题 滥用watch。 名字解释 watch 例子 先看一个代码例子&#xff1a; <template>{{ dataList }} </template><script setup lang"ts"> import { ref, watch } from "vue";const dataList ref([]); const props defineProps([&q…...

编程日记 2024/6/30 18:50:18

【LLM 评估】GLUE benchmark：NLU 的多任务 benchmark

论文&#xff1a;GLUE: A Multi-Task Benchmark and Analysis Platform for Natural Language Understanding ⭐⭐⭐⭐ arXiv:1804.07461, ICLR 2019 Site: https://gluebenchmark.com/ 文章目录 一、论文速读二、GLUE 任务列表2.1 CoLA&#xff08;Corpus of Linguistic Accep…...

编程日记 2024/6/30 18:49:17

Go线程调度器

基本结构 字段gcwaiting、stopwait和stopnoted都是串行运行时任务执行前后的辅助协调手段 gcwaiting字段的值用于表示是否需要停止调度 在停止调度前&#xff0c;该值会被设置为1在恢复调度之前&#xff0c;该值会被设置为0这样做的作用是&#xff0c;一些调度任务在执行时只…...

编程日记 2024/6/30 18:48:15

使用 fvm 管理 Flutter 版本

文章目录 Github官网fvm 安装Mac/Linux 环境Windows 环境 fvm 环境变量fvm 基本命令 Github https://github.com/leoafarias/fvmhttps://github.com/flutter/flutter 官网 https://fvm.app/ fvm 安装 Mac/Linux 环境 Install.sh curl -fsSL https://fvm.app/install.sh …...

编程日记 2024/6/30 18:44:12

若依-前后端分离项目学习

★★★★★省流 直接看第一集和最后一集★★★★★ 第一天&#xff08;6.24&#xff09; 具体参考视频 b站 楠哥教你学Java 【【开源项目学习】若依前后端分离版&#xff0c;通俗易懂&#xff0c;快速上手】 https://www.bilibili.com/video/BV1HT4y1d7oA/?shar…...

编程日记 2024/6/30 18:43:11

使用adb shell getprop命令获取Android设备的属性

常用属性获取&#xff1a; adb shell getprop ro.build.version.emui —查询EMUI版本 adb shell getprop ro.product.brand —查询手机品牌 adb shell getprop ro.product.name --查询设备名称 adb shell getprop ro.serialno —查询设备序列号 获取手机系统信息( CPU,厂商…...

编程日记 2024/6/30 18:36:04

LNMP环境部署指南

本文档将指导您在CentOS 6.5上部署LNMP&#xff08;Linux、Nginx、MySQL、PHP&#xff09;环境。 系统环境 系统平台&#xff1a;CentOS release 6.5 安装前准备 在安装LNMP之前&#xff0c;您需要安装一些编译器和依赖包。 必备编译器和工具 #安装gcc、gcc-c编译器&#…...

编程日记 2024/6/30 18:32:00

[stm32]温湿度采集与OLED显示

一、I2C总线协议 I2C&#xff08;Inter-integrated circuit &#xff09;是一种允许从不同的芯片或电路与不同的主芯片通信的协议。它仅用于短距离通信&#xff0c;是一种用于两个或多个设备之间进行数据传输的串行总线技术&#xff0c;它可以让你在微处理器、传感器、存储器、…...

编程日记 2024/6/30 18:29:58

大模型知识库的使用

大模型知识库的使用通常涉及以下几个方面&#xff0c;使用大模型知识库可以提高信息检索的准确性和效率&#xff0c;促进知识的传播和应用。同时&#xff0c;也需要关注知识库的质量和更新&#xff0c;以确保提供的知识是准确和可靠的。北京木奇移动技术有限公司&#xff0c;专…...

编程日记 2024/6/30 18:28:57

Docker - Oracle Database 23ai Free

博文目录 文章目录 说明命令NavicatSYSTEMPDBADMIN 扩展公共用户本地用户 说明 Oracle 官方镜像仓库 Database 23ai Free | Oracle Docker 官方没有提供 Oracle Database 相关镜像, 但是 Oracle 官方镜像仓库有提供, 打开上面的链接, 选择 Database, 选择合适的版本, 如 enter…...

编程日记 2024/6/30 18:25:54

spring常用方法

1. 读取配置文件信息 方式一&#xff1a; // 获取文件路径 String fileName "application.yaml"; String filePath this.getClass().getClassLoader().getResource(fileName).getPath();BufferedReader bufferedReader new BufferedReader(new FileReader(path)…...

编程日记 2024/6/30 18:24:53

虚拟机能装在移动硬盘里吗安全吗 PD虚拟机迁移到移动硬盘的方法

虚拟机技术的迅速发展为用户提供了更为灵活的跨系统办公方案。许多用户希望在不同的电脑设备上运行相同的虚拟机&#xff0c;同时带来的也有一个问题&#xff1a;虚拟机能否装在移动硬盘里&#xff1f;针对用户的疑问&#xff0c;接下来给大家介绍虚拟机能装在移动硬盘里吗&…...

编程日记 2024/6/30 18:19:49

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2026/2/4 15:41:08

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2026/2/1 10:43:18

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/12/23 11:20:24

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2026/1/24 12:58:24

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2026/1/26 3:45:28

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

消息队列系统设计与实践全解析

文章目录 &#x1f680; 消息队列系统设计与实践全解析&#x1f50d; 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡&#x1f4a1; 权衡决策框架 1.3 运维复杂度评估&#x1f527; 运维成本降低策略 &#x1f3d7;️ 二、典型架构设计2.1 分布式事务最终一致…...

编程新知 2026/2/5 4:20:53

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

编程新知 2026/1/24 10:52:06