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

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

news 2025/11/5 9:37:47

表单标签

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

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

渲染学进阶内容——模型

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

编程新知 2025/10/28 1:35:57

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/8/15 18:53:03

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/11/4 20:56:54

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2025/11/4 11:03:46

MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

编程新知 2025/9/20 11:57:48

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

编程新知 2025/10/29 10:49:27

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...

编程新知 2025/11/4 6:15:36

向量几何的二元性：叉乘模长与内积投影的深层联系

在数学与物理的空间世界中&#xff0c;向量运算构成了理解几何结构的基石。叉乘&#xff08;外积&#xff09;与点积&#xff08;内积&#xff09;作为向量代数的两大支柱&#xff0c;表面上呈现出截然不同的几何意义与代数形式&#xff0c;却在深层次上揭示了向量间相互作用的…...

编程新知 2025/10/30 6:55:28

Qt的学习（二）

1. 创建Hello Word 两种方式&#xff0c;实现helloworld&#xff1a; 1.通过图形化的方式&#xff0c;在界面上创建出一个控件&#xff0c;显示helloworld 2.通过纯代码的方式&#xff0c;通过编写代码&#xff0c;在界面上创建控件&#xff0c; 显示hello world&#xff1b; …...

编程新知 2025/11/4 23:30:58