【Web前端】创建我的第一个 Web 表单
Web 开发中,表单是不可或缺的组成部分。无论是用户注册、登录还是反馈收集,表单都是与用户交互的重要方式。
什么是 Web 表单?
Web 表单是一种用于收集用户输入数据的界面元素。它们允许用户在浏览器中输入信息并提交这些信息到服务器。Web 表单通常由多个字段组成,例如文本框、下拉菜单和按钮等。
设计表单
在开始编码之前,需要考虑我们希望从用户那里收集哪些信息。将创建一个简单的联系人表单,允许用户输入他们的姓名、电子邮件、消息内容,并提交该信息。
表单设计要素
- 姓名 - 一个文本框,用户输入他们的名字。
- 电子邮件 - 一个文本框,用户输入他们的电子邮件地址。
- 消息 - 一个多行文本框,用户可以输入他们的消息。
- 提交按钮 - 用户点击此按钮以提交表单数据。
使用 HTML 实现我们的表单
现在,使用以下 HTML 元素来构建我们的表单:
-
<form>
:定义表单的开始和结束。 -
<label>
:为每个输入字段提供描述。 -
<input>
:用于输入单行文本(如姓名和电子邮件)。 -
<textarea>
:用于输入多行文本(如消息)。 -
<button>
:用户提交表单的按钮。
HTML 代码示例
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>联系表单</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>联系我们</h1><form action="/submit" method="POST"><div><label for="name">姓名:</label><input type="text" id="name" name="name" required></div><div><label for="email">电子邮件:</label><input type="email" id="email" name="email" required></div><div><label for="message">消息:</label><textarea id="message" name="message" rows="4" required></textarea></div><div><button type="submit">提交</button></div></form>
</body>
</html>
代码解释
-
<!DOCTYPE html>
声明文档类型为 HTML5。-
<html lang="zh">
设置网页语言为中文。-
<head>
中包含了网页元信息和样式链接。-
<form>
元素的 action
属性指定了数据提交的目标 URL(这里为 /submit
),method
属性设置为 POST,表示以 POST 方法提交数据。- 每个
<label>
元素使用 for
属性与对应的输入控件关联,增强可访问性。-
<input>
和 <textarea>
元素用于接收用户输入,且都设置了 required
属性,确保用户必填这些字段。-
<button>
元素用于提交表单。
基本表单样式
为了使我们的表单看起来更加美观,我们可以使用 CSS(层叠样式表)为其添加一些基本的样式。以下是一个简单的 CSS 示例,可以使表单更加整洁和用户友好。
/* styles.css */
body {font-family: Arial, sans-serif; /* 设置全局字体 */margin: 20px; /* 设置页面边距 */
}h1 {color: #333; /* 设置标题颜色 */
}form {max-width: 400px; /* 设置表单的最大宽度 */margin: auto; /* 居中显示表单 */padding: 20px; /* 为表单添加内边距 */border: 1px solid #ccc; /* 添加边框 */border-radius: 5px; /* 圆角边框 */background-color: #f9f9f9; /* 设置背景颜色 */
}div {margin-bottom: 15px; /* 各个输入控件之间的间距 */
}label {display: block; /* 标签占据一整行 */margin-bottom: 5px; /* 标签与输入框之间的间距 */
}input[type="text"],
input[type="email"],
textarea {width: 100%; /* 输入框和文本区域宽度充满父容器 */padding: 10px; /* 内边距,增大可点击区域 */border: 1px solid #ccc; /* 添加边框 */border-radius: 3px; /* 圆角边框 */
}button {padding: 10px 15px; /* 内边距,使按钮更大 */background-color: #28a745; /* 按钮背景色 */color: white; /* 按钮文本颜色 */border: none; /* 去掉默认边框 */border-radius: 3px; /* 圆角边框 */cursor: pointer; /* 鼠标悬停时显示手指光标 */
}button:hover {background-color: #218838; /* 鼠标悬停时更改按钮颜色 */
}
样式解释
全局样式:
body
设置了全局字体和页面的边距,使内容不会紧贴浏览器边缘。标题:
h1
的颜色被设置为深灰色,以提高可读性。表单样式:
form
的最大宽度限制在 400 像素,并居中显示。它有一定的内边距和圆角边框,增加了视觉效果。输入控件间距:每个输入控件都被包裹在一个
<div>
中,通过 margin-bottom
属性给予了适当的间隔。标签样式:使用
display: block
使得标签占据整行,从而让输入框看起来更整齐。输入框和文本区域:所有输入字段(文本框、电子邮件框和文本区)都宽度设置为 100%,并且有统一的内边距、边框和圆角样式。
按钮样式:按钮的背景色为绿色,悬停时会变深色,以增强用户交互体验。
向服务器发送表单数据
当用户填写完表单并点击提交按钮后,表单数据将通过 POST 方法被发送到指定的 URL(在本例中为 /submit
)。为了处理这些数据,需要有一个服务器端应用程序来接收和处理请求。下面是一个使用 Node.js 和 Express 框架的简单服务器示例:
Node.js Express 服务器示例
const express = require('express'); // 引入 Express 框架
const bodyParser = require('body-parser'); // 引入 body-parser 中间件
const app = express(); // 创建 Express 应用// 使用 body-parser 中间件解析请求体
app.use(bodyParser.urlencoded({ extended: true }));// 定义处理表单提交的路由
app.post('/submit', (req, res) => {const name = req.body.name; // 获取姓名const email = req.body.email; // 获取电子邮件const message = req.body.message; // 获取消息内容// 在这里可以处理收到的数据,例如保存到数据库或发送电子邮件console.log(`姓名: ${name}, 电子邮件: ${email}, 消息: ${message}`);// 返回响应给客户端res.send(`感谢您提交的信息,${name}!`);
});// 启动服务器并监听指定的端口
app.listen(3000, () => {console.log('服务器运行在 http://localhost:3000');
});
代码解释
引入依赖:
express
:轻量级的 Web 应用框架,用于构建服务器。body-parser
:中间件,用于解析请求体,使得我们可以轻松获取 POST 请求中的数据。创建应用:使用
express()
创建一个新的 Express 应用实例。解析请求体:使用
body-parser
的 urlencoded
方法来解析 URL 编码的数据(即表单数据)。extended: true
选项允许使用丰富的数据对象。定义 POST 路由:当用户提交表单时,浏览器会向
/submit
发送一个 POST 请求。在这个路由处理函数中,我们从 req.body
中提取用户输入的姓名、电子邮件和消息。处理数据:在实际应用中,你可能想要将这些数据存储到数据库或通过电子邮件发送给某人。在示例中,我们仅在控制台打印信息。
发送响应:服务器返回一个简单的消息,确认用户已成功提交表单。
启动服务器:使用
app.listen
方法启动服务器,并指定监听的端口(3000)。当服务器启动时,它将在控制台输出一条消息。
相关文章:
【Web前端】创建我的第一个 Web 表单
Web 开发中,表单是不可或缺的组成部分。无论是用户注册、登录还是反馈收集,表单都是与用户交互的重要方式。 什么是 Web 表单? Web 表单是一种用于收集用户输入数据的界面元素。它们允许用户在浏览器中输入信息并提交这些信息到服务器。Web …...
“人工智能+高职”:VR虚拟仿真实训室的发展前景
在当今科技日新月异的时代,人工智能(AI)与虚拟现实(VR)技术的融合正逐步改变着各行各业,教育领域也不例外。特别是在高等职业教育(简称“高职”)体系中,VR虚拟仿真实训室…...
状态模式之状态机
状态机的背景 在软件开发过程中,尤其是涉及到复杂的系统行为控制时,我们常常会遇到这样的情况:一个对象或者系统会在多种状态之间进行转换,并且在不同状态下对相同事件的响应是不同的。 以自动售卖机为例,自动售卖机…...
NUXT3学习日记四(路由中间件、导航守卫)
前言 在 Nuxt 3 中,中间件(Middleware)是用于在页面渲染之前或导航发生之前执行的函数。它们允许你在路由切换时执行逻辑,像是身份验证、重定向、权限控制、数据预加载等任务。中间件可以被全局使用,也可以只在特定页…...
基于重复控制补偿的高精度 PID 控制
1. 背景与原理 重复控制(Repetitive Control, RC)是一种适用于周期性信号跟踪和周期性扰动抑制的控制方法,通过在控制回路中引入周期补偿器来提高系统的控制精度。将 RC 与 PID 控制相结合,利用 PID 的快速响应特性和 RC 的周期补…...
Linux之日志
日志 在编写网络服务器, 各种软件时, 程序一定要打印一些日志信息. 1. 可以向显示器打印, 也可以向文件中写入. 2. 日志是软件在运行时记录的流水账, 用于排查服务进程挂掉的信息. 其中必须要有的是: 日志等级, 时间, 日志内容.可选的是文件名, 代码行数, 进程pid 等 日志…...
【LeetCode面试150】——202快乐数
博客昵称:沈小农学编程 作者简介:一名在读硕士,定期更新相关算法面试题,欢迎关注小弟! PS:哈喽!各位CSDN的uu们,我是你的小弟沈小农,希望我的文章能帮助到你。欢迎大家在…...
云原生之k8s服务管理
文章目录 服务管理Service服务原理ClusterIP服务 对外发布应用服务类型NodePort服务Ingress安装配置Ingress规则 Dashboard概述 认证和授权ServiceAccount用户概述创建ServiceAccount 权限管理角色与授权 服务管理 Service 服务原理 容器化带来的问题 自动调度:…...
【Vue】 npm install amap-js-api-loader指南
前言 项目中的地图模块突然打不开了 正文 版本太低了,而且Vue项目就应该正经走项目流程啊喂! npm i amap/amap-jsapi-loader --save 官方说这样执行完,就这结束啦!它结束了,我还没有,不然不可能记录这篇文…...
RocketMQ: 部署结构与存储特点
RocketMQ 是什么 它是一个队列模型的消息中间件,具有高性能、高可靠、高实时、分布式特点 Producer、Consumer、队列都可以分布式Producer 向一些队列轮流发送消息 队列集合称为 TopicConsumer 如果做广播消费则一个 consumer 实例消费这个 Topic 对应的所有队列如果…...
Android OpenGL ES详解——绘制圆角矩形
1、绘制矩形 代码如下: renderer类: package com.example.roundrectimport android.content.Context import android.opengl.GLES30 import android.opengl.GLSurfaceView.Renderer import com.opengllib.data.VertexArray import com.opengllib.prog…...
【大数据学习 | Spark】Spark的改变分区的算子
当分区由多变少时,不需要shuffle,也就是父RDD与子RDD之间是窄依赖。 当分区由少变多时,是需要shuffle的。 但极端情况下(1000个分区变成1个分区),这时如果将shuffle设置为false,父子RDD是窄依赖关系&…...
前端知识点---rest(javascript)
文章目录 前端知识点---rest(javascript)rest的用法基本语法特点使用场景与扩展运算符(spread)区别小练习 前端知识点—rest(javascript) rest出现于ES2015 function doSum(a,b, ...args) //示例中的args就是一个rest参数 //它会将后续的所有参数存储…...
Spark使用过程中的 15 个常见问题、详细解决方案
目录 问题 1:Spark 作业超时问题描述解决方案Python 实现 问题 2:内存溢出问题描述解决方案Python 实现 问题 3:Shuffle 性能问题问题描述解决方案Python 实现 问题 4:Spark 作业调度不均问题描述解决方案Python 实现 问题 5&…...
ASP.NET MVC宠物商城系统
该系统采用B/S架构,使用C#编程语言进行开发,以ASP.NET MVC框架为基础,以Visual Studio 2019为开发工具,数据库采用SQL Server进行保存数据。系统主要功能包括登录注册、宠物展示、个人中心、我的订单、购物车、用户管理、宠物类别…...
DQN系列算法详解
代码链接见文末 1. Q-learning 1.1 概述 Q-Learning是一种强化学习算法,目的是通过选择能带来最大长期收益的行为来完成任务。 做事包含瞬时奖励和记忆经验奖励: 在Q-Learning中,每个动作都会带来“瞬时奖励”,同时也会根据过去的经验记住哪些行为更有利。瞬时奖励: 这里…...
uniapp发布android上架应用商店权限
先看效果: 实现原理: 一、利用uni.addInterceptor的拦截器,在一些调用系统权限前拦截,进行弹窗展示,监听确定取消实现业务逻辑。 二、弹窗是原生nativeObj进行drawRect绘制的 三、权限申请调用使用的 plus.android.…...
已阻止加载“http://localhost:8086/xxx.js”的模块,它使用了不允许的 MIME 类型 (“text/plain”)。
记录今天解决的一个小bug 在终端启动8080端口号监听后,打开网址http://localhost:8080,发现不能正确加载页面,打开检查-控制台,出现如下警告:已阻止加载“http://localhost:8086/xxx.js”的模块,它使用了不…...
JavaEE之线程初阶(上)
前文我们知道计算机中的每一个程序都对应着一个进程,进程是CPU申请资源的最小单位,那么线程是什么呢,线程中我们又能学习到什么新的知识呢?? 我们来一探究竟 1. 认识线程(Thread) 线程是什么 …...
Spring Security @PreAuthorize注解
PreAuthorize 注解在 Spring Security 中提供了一种声明式的方法,可以在您的 Spring Boot 应用中添加方法级别的安全检查。本教程将引导您设置并有效使用 PreAuthorize,确保用户只能在具有特定角色或权限的情况下调用 REST API。 什么是 PreAuthorize&a…...
windows已建立威胁IP排查
在应急响应的时候,需要筛选出服务器建立连接的进程、PID,此代码可满足该需求实现共计2步 首先windos netstat-ano > all.txt, 上传至pycharm路径 第一步获取服务器建立连接的ip import re# 从文件读取 netstat 输出 def read_netstat_f…...
AI 大模型如何重塑软件开发流程?——技术革新与未来展望
人工智能的蓬勃发展为许多领域注入了强劲动力,而在软件开发这一关键技术领域,AI 大模型的应用正在彻底改变传统流程。从代码自动生成到智能测试,再到协同开发和流程优化,AI 正逐步成为软件开发者的得力助手,也推动企业…...
Admin.NET框架前端由于keep-alive设置缓存导致的onUnmount未触发问题
bug版本:next分支,基于.NET6版本; 问题描述: 1、添加keep-alive后,在其下运行的组件会出现onActived(被关注时)和onDeactived(取消关注时)生命周期,而组件原有生命周期为onMounted(被创造时)和onUnmounted(…...
Rest-assured
依赖 <--rest-assured依赖--><dependency><groupId>io.rest-assured</groupId><artifactId>rest-assured</artifactId><version>4.4.0</version><scope>test</scope> </dependency><--junit5依赖-->…...
ubuntu24挂载硬盘记录
1、显示硬盘及所属分区情况。在终端窗口中输入如下命令: sudo fdisk -l 找到自己硬盘的分区 我的地址/dev/sda 2、显示硬盘及所属分区情况。在终端窗口中输入如下命令,格式化自己硬盘: sudo mkfs -t ext4 /dev/sda 3、在终端窗口中输入如下…...
Dubbo集成SpringBoot实现远程服务调用
SpringBoot集成Dubbo Dubbo介绍了解 Dubbo 核心概念和架构dubbo特性dubbo运行原理图 SpringBoot集成Dubbo技术实战一、Dubbo Spring Boot 版本关系二、引入Maven依赖demo项目基础结构引入依赖创建每个模块1)api模块2)provider模块3)consumer模…...
Redis最终篇分布式锁以及数据一致性
在前三篇我们几乎说完了Redis的所有的基础知识以及Redis怎么实现高可用性,那么在这一篇文章中的话我们主要就是说明如果我们使用Redis出现什么问题以及解决方案是什么,这个如果在未来的工作中也有可能会遇到,希望对看这篇博客的人有帮助,话不多说直接开干 一.Hotkey以及BigKey…...
TCP协议
报文格式 源/目的端口号:数据从哪个进程来,到哪个进程去32位序号:TCP传输过程中,在发送端出的字节流中,传输报文中的数据部分的每一个字节都有它的编号32位确认号:标识了报文接收端期望接收的字节序列4位首…...
Vue3 源码解析(十):watch 的实现原理
本篇文章笔者会讲解 Vue3 中侦听器相关的 api:watchEffect 和 watch 。在 Vue3 之前 watch 是 option 写法中一个很常用的选项,使用它可以非常方便的监听一个数据源的变化,而在 Vue3 中随着 Composition API 的写法推行也将 watch 独立成了一…...
2023年9月GESPC++一级真题解析
一、单选题(每题2分,共30分) 题号 123456789101112131415 答案 CDBCDBACACBBDDA 1. 我们通常说的 “ 内存 ” 属于计算机中的()。 A. 输出设备 B. 输 ⼊ 设备 C. 存储设备 D. 打印设备 【答案】 C 【考纲知识点】…...
vscode 远程连接ssh 密钥方式
目录 1. powershell 生成key: 2. 在服务器上安装公钥 linux测试成功: 3).为了确保连接成功,输入如下指令以保证以下文件权限正确: 3 开启 ssh 密钥登录 vscode 远程连接配置 python连接测试ok 查看日志: 1. po…...
字符函数和字符串函数
字符分类函数 C语言中有⼀系列的函数是专门做字符分类的,也就是⼀个字符是属于什么类型的字符的。 这些函数的使用都需要包含⼀个头文件:ctype.h 这些函数的用法非常类似。 int islower ( int c )islower是能够判断参数部分是否是小写字母的。 通过返…...
如何利用ChatGPT加速开发与学习:以BPMN编辑器为例
在现代开发中,开发者经常会遇到各种需要编写和学习新技术的任务。ChatGPT作为一种强大的自然语言处理工具,不仅可以辅助编写代码,还可以帮助学习新的编程概念和解决开发中的难题。本文将以开发一个BPMN(业务流程建模与标注&#x…...
深度学习2
四、tensor常见操作 1、元素值 1.1、获取元素值 tensor.item() 返回tensor的元素;只能在一个元素值使用,多个报错,当存在多个元素值时需要使用索引进行获取到一个元素值时在使用 item。 1.2、元素值运算 tensor对元素值的运算:…...
工业生产安全-安全帽第二篇-用java语言看看opencv实现的目标检测使用过程
一.背景 公司是非煤采矿业,核心业务是采选,大型设备多,安全风险因素多。当下政府重视安全,头部技术企业的安全解决方案先进但价格不低,作为民营企业对安全投入的成本很敏感。利用我本身所学,准备搭建公司的…...
单片机学习笔记 9. 8×8LED点阵屏
更多单片机学习笔记:单片机学习笔记 1. 点亮一个LED灯单片机学习笔记 2. LED灯闪烁单片机学习笔记 3. LED灯流水灯单片机学习笔记 4. 蜂鸣器滴~滴~滴~单片机学习笔记 5. 数码管静态显示单片机学习笔记 6. 数码管动态显示单片机学习笔记 7. 独立键盘单片机学习笔记 8…...
c++ 力扣题(1)JZ64
JZ64求123...n_牛客题霸_牛客网 因此不能使用等差求和(禁掉位运算为了禁掉等差求和,右移一位就是等差除二)、循环、递归来解决 我们运用到在 统计构造次数所学到的内容: 1.可以利用静态全局变量的思想来做 2.构造n次对象&…...
logback动态获取nacos配置
文章目录 前言一、整体思路二、使用bootstrap.yml三、增加环境变量四、pom文件五、logback-spring.xml更改总结 前言 主要是logback动态获取nacos的配置信息,结尾完整代码 项目springcloudnacosplumelog,使用的时候、特别是部署的时候,需要改环境&#…...
基于零相差前馈补偿的 PID 控制
零相差前馈补偿是一种结合前馈补偿与反馈控制的策略,旨在提高控制系统对参考信号的跟踪精度。通过设计合理的前馈补偿器,使得系统对参考输入实现零相位差的跟踪,同时利用 PID 控制器保证系统的稳定性和动态性能。 1. 原理概述 目标ÿ…...
任务通知的本质(任务通知车辆运行) 软件定时器的本质(增加游戏音效)
任务通知的本质 没有任务通知 所谓"任务通知",你可以反过来读"通知任务"。 我们使用队列、信号量、事件组等等方法时,并不知道对方是谁。使用任务通知时,可 以明确指定:通知哪个任务。 使用队列、信号量、…...
如何在 MySQL 中进行数据导入和导出?
在 MySQL 中进行数据的导入和导出是一项常见的任务,用于数据备份、恢复、迁移以及数据分析等多种用途。MySQL 提供了多种方法来进行数据的导入和导出,每种方法都有其适用的场景和特点。以下是几种常用的 MySQL 数据导入和导出方法,包括命令行…...
python语言基础-5 进阶语法-5.3 流式编程
声明:本内容非盈利性质,也不支持任何组织或个人将其用作盈利用途。本内容来源于参考书或网站,会尽量附上原文链接,并鼓励大家看原文。侵删。 5.3 流式编程(参考链接:https://www.zhihu.com/question/59062…...
centos 服务器 docker 使用代理
宿主机使用代理 在宿主机的全局配置文件中添加代理信息 vim /etc/profile export http_proxyhttp://127.0.0.1:7897 export https_proxyhttp://127.0.0.1:7897 export no_proxy"localhost,127.0.0.1,::1,172.171.0.0" docker 命令使用代理 例如我想在使用使用 do…...
[个人专属博客] - docker安装
🎉🎉🎉🎉🎉🎉 欢迎访问的个人博客:http://swzbk.site/,加好友,一起赚🧧🧧🧧 🎉🎉🎉🎉&…...
推荐一个QDirStat基于 Qt 的目录统计工具
QDirStat 是一款基于 Qt 的目录统计工具,旨在帮助用户分析磁盘空间使用情况并进行清理。QDirStat的一些主要特点和功能: 跨平台兼容性:QDirStat 支持 Linux、BSD、Unix-like 系统以及 macOS,确保了广泛的用户基础。 直观的数据展…...
yolo自动化项目实例解析(九) 导航
比如我们经常使用的导航,说白了就是寻找两点之间最近的路径,也就是所谓的寻路,我们需要想办法让程序知道他要去哪里,路径包含(起点、轨迹、终点) 一、录制轨迹 从平面角度来看,我们可以把区域视…...
MySQL 报错:1137 - Can‘t reopen table
MySQL 报错:1137 - Can’t reopen table 1. 问题 对临时表查询: select a.ts_code,a.tsnum,b.tsnum from (select t.ts_code ,count(*) tsnum from tmp_table t group by t.ts_code having count(*) > 20 and count(*)< 50 ) a ,(select t.ts_…...
Bokeh实现大规模数据可视化的最佳实践
目录 引言 一、Bokeh简介 二、安装Bokeh 三、数据准备 四、性能优化 五、创建图表 六、添加交互功能 七、应用案例 八、高级技巧 九、总结 引言 在数据科学领域,数据可视化是一个至关重要的环节。通过可视化,我们可以直观地理解数据的特征和趋势,为数据分析和决策…...
HTMLCSS:比赛记分卡
效果演示 这段 HTML 和 CSS 代码创建了一个卡片式的体育比赛信息展示组件,用于显示篮球比赛的两个队伍名称、比赛时间、比分以及一些装饰性的视觉元素。 HTML <div class"card"><div data-status"inprogress" class"teams"…...
什么是 Faiss?
好的,我来详细解释 Faiss,它的用途、使用场景,以及如何安装和使用。 什么是 Faiss? Faiss 是由 Facebook AI Research 开发的一个开源库,专门用于高效的相似性搜索和聚类。它非常擅长在高维向量空间中进行快速搜索&a…...