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

前端零基础入门到上班：Day7——表单系统实战全解析

news 来源：原创 2025/8/14 14:57:40

🧩前端零基础入门到上班：Day7——表单系统实战全解析

✅ 目标：不仅掌握 HTML 表单标签，更深入理解其在实战中的作用、验证方式、美化技巧与 JS 联动，为后续接入 Vue、后端接口打下坚实基础。

🌟 一、HTML 表单基础标签全讲解

🧱 1.1 `<form>` 是什么？为什么重要？

所有表单控件必须写在 <form> 中才能统一提交。
action：指定提交地址（可以是接口 URL）
method：提交方式，常用 GET / POST
enctype：上传文件时设置为 multipart/form-data

<form action="/api/register" method="post" enctype="multipart/form-data"><!-- 表单控件写在这里 -->
</form>

🧰 1.2 表单核心控件分类总览

控件	标签	常见用途	特点说明
单行输入	`<input>`	用户名、密码等	多类型支持
多行输入	`<textarea>`	评论、简介	手动设置行列
下拉框	`<select>`	性别、城市选择	可选项配合 `<option>`
单选框	`<input type="radio">`	性别选择	同组需 `name` 一致
多选框	`<input type="checkbox">`	爱好选择	`value` 必设
文件上传	`<input type="file">`	上传头像	需配合 enctype
提交按钮	`<button>` / `<input type="submit">`	提交表单	`type` 属性控制行为

✨ 1.3 常用 `<input>` 类型深度实践

<form><input type="text" name="username" placeholder="用户名" required><input type="password" name="pwd" placeholder="密码" minlength="6" required><input type="email" name="email" placeholder="邮箱" required><input type="tel" name="phone" pattern="1[3-9]\d{9}" placeholder="手机号" title="请输入合法手机号"><input type="url" name="homepage" placeholder="个人主页 URL"><input type="date" name="birthday"><input type="file" name="avatar" accept="image/*">
</form>

🎯 注意点：

required 为原生验证，不填无法提交
pattern 支持正则校验
多选用 name="hobby[]" 来表示数组参数

🧪 二、实战：注册 + 登录 + 留言系统

📋 2.1 注册表单：多字段布局 + 美化

<form id="registerForm"><label>用户名</label><input type="text" name="username" required><label>密码</label><input type="password" name="password" required><label>性别</label><select name="gender"><option value="male">男</option><option value="female">女</option></select><label>上传头像</label><input type="file" name="avatar"><button type="submit">注册</button>
</form>

💄 表单美化（核心样式）

form {width: 100%;max-width: 500px;margin: auto;display: flex;flex-direction: column;gap: 12px;background: #f5f5f5;padding: 20px;border-radius: 10px;
}
input, select, button {padding: 10px;border: 1px solid #ccc;border-radius: 6px;
}
button {background-color: #0066ff;color: white;cursor: pointer;
}

🔐 2.2 登录系统：带记住我功能

<form id="loginForm"><input type="text" name="username" placeholder="用户名" required><input type="password" name="password" placeholder="密码" required><label><input type="checkbox" name="remember"> 记住我</label><button type="submit">登录</button>
</form>

💬 2.3 留言板表单：textarea + 表单提交

<form id="commentForm"><label>昵称</label><input type="text" name="nickname" required><label>留言内容</label><textarea name="content" rows="4" required></textarea><button type="submit">提交留言</button>
</form>

🛡️ 三、前端验证：原生 + JavaScript 双管齐下

🔍 3.1 原生验证小结

验证方式	说明
`required`	是否必填
`pattern`	正则表达式
`minlength`/`maxlength`	长度限制
`type=email` / `tel` / `url`	格式自动验证

✨ 3.2 JS 自定义验证逻辑

<script>
document.getElementById("registerForm").addEventListener("submit", function(e) {const username = this.username.value;const pwd = this.password.value;if (username.length < 3) {alert("用户名至少3位！");e.preventDefault();}if (pwd.length < 6) {alert("密码至少6位！");e.preventDefault();}
});
</script>

📡 四、与后端交互机制深入理解

📮 4.1 GET 与 POST 提交差异

提交方式	特点	示例
GET	参数在 URL 中	`/api?user=aaa&pwd=123`
POST	参数在请求体中	后端通过 body 获取

📦 4.2 使用 `fetch` 模拟表单异步提交

<script>
document.getElementById("loginForm").addEventListener("submit", function(e) {e.preventDefault();const formData = new FormData(this);fetch('/api/login', {method: 'POST',body: formData}).then(res => res.json()).then(data => {alert("登录结果：" + data.message);});
});
</script>

🎨 五、表单美化 + 响应式设计技巧

@media screen and (max-width: 600px) {form {padding: 10px;}input, select, button {font-size: 14px;}
}

🧠 六、易错点总结 + 进阶拓展

<label for=""> 中 for 属性值应与 input id 匹配，否则点击无效
不要遗漏 name 属性，否则数据不会被提交
type="submit" 才能触发表单默认提交行为
文件上传必须设置 enctype="multipart/form-data"

🎯 Day7 小结

✅ 你已经掌握了：

表单标签、控件及其语法
表单场景构建（注册、登录、留言）
验证逻辑全流程（原生 + JS）
提交机制（GET / POST + fetch）
响应式样式编写与优化

📢 明日预告：Day8 —— JavaScript 入门 + 表单动态交互

📩 如果你在学习表单过程中有不理解的地方，欢迎随时私信我。支持1v1代码查看、调试协助、项目整合答疑，助你从入门无阻碍过渡到实战。

🔥 系列持续更新，关注我不迷路！

📩 有问题可以私信我1v1

前端零基础入门到上班：Day7——表单系统实战全解析

🧩前端零基础入门到上班：Day7——表单系统实战全解析 ✅ 目标：不仅掌握 HTML 表单标签，更深入理解其在实战中的作用、验证方式、美化技巧与 JS 联动，为后续接入 Vue、后端接口打下坚实基础。 🌟 一、HTML 表…...

编程日记 2025/8/14 14:57:40

阀门轴承电动车工件一键精修软件

若需定制开发“ComfyUI意见精修软件” 技术栈建议： 前端：React/Vue Figma插件API（直接读取设计稿）。后端：Node.js/Python NLP库（spaCy/NLTK）。数据库：MongoDB（存储…...

编程日记 2025/8/14 14:56:09

【疑难杂症】【VS Code】VS Code连接不上远程服务器

【疑难杂症】【VS Code】VS Code连接不上远程服务器经过多轮资料查询和测试，这种时候有三种可能： 可能原因1：服务器磁盘空间不足，无法创建服务器连接。解决方案：清理磁盘空间，尤其是/tmp文件所在的磁盘。…...

编程日记 2025/8/14 14:53:27

Word 中“母版页”的等效机制

Word 和 PowerPoint 不太一样——**Word 实际上没有像 PowerPoint 那样的“母版页（Master Page）”**功能。但它有1个和“母版页”功能类似的东西，可能造成你看到的“校徽自动出现在每一页”的现象： ✅ Word 中“母版页”的等效机制…...

编程日记 2025/8/8 20:34:47

大模型时代：AI应用的变革与挑战

最近研学过程中发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击链接跳转到网站人工智能及编程语言学习教程。读者们可以通过里面的文章详细了解一下人工智能及其编程等教程和学习方法。下面开始对正文内容的…...

编程日记 2025/8/6 8:13:11

C++ (菱形继承，通用接口，多态介绍)

菱形继承 class A{public :int a;};class B:public A{};class C:public A{};class D:public B,public C{public:void function(){a200;} };int main(){D object;// object.a100; 如果如此使用会产生报错会导致一个成员在类D中出现两次，产生歧义，浪…...

编程日记 2025/8/14 14:54:10

vue3+vite 实现.env全局配置

首先创建.env文件 VUE_APP_BASE_APIhttp://127.0.0.1/dev-api 然后引入依赖： pnpm install dotenv --save-dev 引入完成后，在vite.config.js配置文件内加入以下内容： const env dotenv.config({ path: ./.env }).parsed define: { // 将…...

编程日记 2025/8/14 14:56:59

4.18日学习--引用

引用是变量的别名，它为已存在的变量提供了一个新的名称，对引用的操作实际上就是对其所引用变量的操作。引用在定义时必须初始化，且一旦初始化后就不能再引用其他变量。 #include <iostream> using namespace std;//引用做函数的返回值…...

编程日记 2025/8/14 14:52:45

poj1067 取石子游戏威佐夫博弈

题目有两堆石子，数量任意，可以不同。游戏开始由两个人轮流取石子。游戏规定，每次有两种不同的取法， 一是可以在任意的一堆中取走任意多的石子；二是可以在两堆中同时取走相同数量的石子。最后把石子全部取完者为胜者…...

编程日记 2025/8/14 14:56:07

文件二进制读写和文本读写以及编码解码

假如是utf8编码，windows系统写：往键盘中写的字符会被utf8编码成字节写入文件。假如是文本写，\n会被替换为\r\n写入，结尾会加文件结束符EOF。假如是二进制写，\n就是\n，文件结尾也不会加什么EOF 读&#xff…...

编程日记 2025/8/14 14:54:11

Java学习手册：常见并发问题及解决方案

在Java并发编程中，开发者常常会遇到各种并发问题，这些问题可能导致程序行为不可预测、性能下降甚至程序崩溃。以下是一些常见的并发问题及其解决方案： 1.竞态条件（Race Condition） 竞态条件是指多个线程同时访问共享…...

编程日记 2025/8/6 17:57:48

幽灵依赖与常见依赖管理

文章目录前言1. 演示：检测和修复幽灵依赖步骤1：安装 depcheck步骤2：在项目根目录运行 depcheck可能的输出步骤3：修复幽灵依赖 2. 依赖管理的好习惯 1. 场景设定现在有如下依赖需求： 2. 依赖冲突的表现3. 解决依赖冲突…...

编程日记 2025/8/13 22:21:28

第T7周:咖啡豆识别

🍨 本文为🔗365天深度学习训练营中的学习记录博客 🍖 原作者：K同学啊 VGG 网络优缺点分析： ● 优点： 结构简洁统一：整张网络结构统一，只使用 33 的小卷积核和 22 的最大池化&…...

编程日记 2025/8/13 19:14:59

【MySQL数据库入门到精通】

文章目录一、SQL分类二、DDL-数据库操作1.查询2.创建数据库3.删除数据库4.使用数据库三、DDL-表操作1.查询一、SQL分类根据功能主要分为DDL DML DQL DCL DDL:Date Definition Language数据定义语言：定义数据库，表和字段 DML:Date Manipulatin Lan…...

编程日记 2025/8/14 14:50:50

C++智能指针的知识！

个人主页：PingdiGuo_guo 收录专栏：C干货专栏大家好呀，我是PingdiGuo_guo，今天我们来学习一下智能指针。文章目录 1.智能指针的概念 2.智能指针的思想 3.智能指针的作用 3.1 自动内存管理 3.2 共享所有权 3.3 避免悬挂指针…...

编程日记 2025/8/14 14:54:56

4.6 实现重定向

本实战通过ServletDemo09类演示了Servlet中的重定向功能。该Servlet通过HttpServletResponse的sendRedirect方法实现页面跳转。在doPost方法中，根据请求参数username和password判断用户身份。若用户名为admin且密码为123456，则调用sendRedirect方法将页面…...

编程日记 2025/8/11 23:48:27

Linux中的管道

管道的概念管道是一种进程间通信的方式。管道是一种半双工通信机制，数据只能读或写，如果要读写同时进行就要创建两个管道管道的类型 1、匿名管道PIPE：通常在亲缘进程中使用（兄弟、父子） 函数参考：匿名管…...

编程日记 2025/8/10 13:00:10

深入简出：KL散度、交叉熵、熵、信息量简介、交叉熵损失

学习这些的最终目的 1、量化两个概率分布的差异 2、推导交叉熵损失一、KL散度 KL散度就是用来量化两个概论分布的差异，如何量化？ 计算真实概论分布P信息量和估计概论分布为Q，但实际概率分布为P时信息量的差值那么设，概率分…...

编程日记 2025/8/9 5:46:21

`peft`（Parameter-Efficient Fine-Tuning：高效微调）是什么

peft（Parameter-Efficient Fine-Tuning：高效微调）是什么 peft库是Hugging Face推出的用于高效参数微调的库，它能在不调整模型全部参数的情况下，以较少的可训练参数对预训练模型进行微调，从而显著降低计算资源需求和微调成本。以下从核心功能、优势、常见微调方法、使用场…...

编程日记 2025/8/10 5:11:17

Windows 图形显示驱动开发-WDDM 1.2功能—Windows 8 中的 DirectX 功能改进（五）

一、每个阶段的 UAV—架构革新与限制突破在 Microsoft Direct3D 11 中，计算着色器 (UAV) 的无序访问视图数限制为 8 个， (像素着色器) RTV) UAV (8 个组合 (呈现目标视图。在 DirectX 11.1 中，可绑定的数量已增加。对于 DirectCompute&a…...

编程日记 2025/8/14 8:19:37

机械臂速成小指南（二十五）：机械臂与人工智能的有机结合

👨‍🏫🥰🥳需要机械臂相关资源的同学可以在我的主页中寻找哦🤖😽🦄 指南目录📖： 🎉🎉机械臂速成小指南（零点五）&…...

编程日记 2025/8/12 18:50:00

浅析MySQL事务锁

在 MySQL 中，事务锁是用于确保数据一致性和并发控制的重要机制。事务锁可以帮助防止多个事务同时修改同一数据，从而避免数据不一致和脏读、不可重复读、幻读等问题。以下是 MySQL 事务锁的关键点总结：事务锁：用于确保数据一致性和并发控制。锁的类型：行级锁：InnoDB，粒…...

编程日记 2025/8/8 14:00:03

Git学习之路(Updating)

常用命令 pwd ：显示当前目录 git init: 在当前目录下创建一个新的仓库（空的） git add name.type：将文件添加到仓库 git commit -m "xx备注xx" ：把文件提交到仓库。git commit一次可以提交很多文件。 git …...

编程日记 2025/8/9 13:14:41

【datawhaleAI春训营第一期笔记】AI+航空安全

记录了一些数据竞赛相关的知识，赛题的代码相关笔记可以从目录寻找目录数据竞赛知识前置知识TPOP竞赛分类： 机器学习基础线性模型树模型KNN模型神经网络深度学习全连接网络深度学习正则化深度学习的优化卷积神经网络竞赛基础知识数据清洗特征工程模型…...

编程日记 2025/8/12 11:55:42

pnpm解决幽灵依赖问题

文章目录前言1. npm/yarn 现在还有幽灵依赖问题吗？2. pnpm 解决了幽灵依赖问题吗？3. pnpm 是如何解决的？举例说明 1. pnpm 的 node_modules 结构原理结构示意 2. 实际演示幽灵依赖的杜绝步骤1：初始化项目并安装依赖步骤2&#xf…...

编程日记 2025/8/9 8:46:03

梯度下降代码

整体流程数据预处理:标准化->加一列全为1的偏置项训练:梯度下降,将数学公式转换成代码预测模型代码 import numpy as np# 标准化函数：对特征做均值-方差标准化 # 返回标准化后的特征、新数据的均值和标准差，用于后续预测def standard(feats…...

编程日记 2025/8/14 8:36:06

七、LangChain Tool类参数对接机制解析：基于Pydantic的类型安全与流程实现

LangChain 的 Tool 类（包括 BaseTool 和 StructuredTool）通过参数校验、输入解析、函数调用的流程，将外部函数与 Agent 的逻辑对接。以下是其内部逻辑的详细解析： 1. 工具与函数对接的核心机制 (1) 工具的定义方式 LangChain 提供了两种主要方式定义工具：继承 BaseTo…...

编程日记 2025/8/9 18:59:53

AIGC产品如何平衡用户体验与内容安全？

当ChatGPT能写诗、Sora会拍电影、AI主播24小时带货时，一场关于“AI说什么”的隐形战争，正在算法与监管的夹缝中悄然爆发。从DeepSeek的冲击到多模态技术的祛魅，AIGC正在重塑内容创作的边界。但同时，诸多质疑也正在发声&#xff…...

编程日记 2025/8/10 11:58:07

uniapp打包报错，

######错误解决方案###### 错误描述： Android minSdkVersion配置问题解决方案： 项目中配置的Android minSdkVersion比三方库中声明的minSdkVersion低，参考文档：https://uniapp.dcloud.net.cn/tutorial/app-android-minsdkversion…...

编程日记 2025/8/9 4:45:41

PC主板及CPU ID 信息、笔记本电脑唯一 MAC地址获取

🥇 版权: 本文由【墨理学AI】原创首发、各位读者大大、敬请查阅、感谢三连 🎉 声明: 作为全网 AI 领域干货最多的博主之一，❤️ 不负光阴不负卿 ❤️ 文章目录 PC主板及CPU ID 信息物理 MAC地址获取win11 新电脑 wmic 安装❤️ 欢迎一起学AI…...

编程日记 2025/8/9 20:31:20

2025妈妈杯数学建模D题完整分析论文

问题1的解题思路围绕建立货量预测模型以预测未来1天各线路货量，并将货量拆解到10分钟颗粒度展开。首先需要对数据进行预处理，读取四个Excel文件（附件1、附件3、附件4、附件5），获取各文件中工作表名称，发现均…...

编程日记 2025/8/14 10:14:30

python-图片分割

图片分割是图像处理中的一个重要任务，它的目标是将图像划分为多个区域或者对象，例如分割出物体、前景背景或特定的部分。在 Python 中，常用的图片分割方法包括传统的图像处理技术（例如阈值分割、区域生长等）和深度学习…...

编程日记 2025/8/12 1:48:42

AI——K近邻算法

文章目录一、什么是K近邻算法二、KNN算法流程总结三、Scikit-learn工具1、安装2、导入3、简单使用三、距离度量1、欧式距离2、曼哈顿距离3、切比雪夫距离4、闵可夫斯基距离5、K值的选择6、KD树一、什么是K近邻算法如果一个样本在特征空间中的k个最相似（即特征空…...

编程日记 2025/8/14 8:34:05

Transformer 架构 - 编码器 (Transformer Architecture - Encoder)

1.Transformer 编码器整体结构 Transformer 编码器的结构相对直观：它由 N 个完全相同的编码器层 (Encoder Layer) 堆叠而成。图1: Transformer 编码器整体结构示意图 (简化) 输入序列（例如，通过 embedding 层转换后的词向量）首先会加上位置编码，然后传入第一个编码器层…...

编程日记 2025/8/14 1:25:31

深入理解 Transformer：从原理解析到文本生成实践

学习目标： 完成本教程后，学习者应该能够： 理解 Transformer 架构的核心思想，尤其是自注意力机制 (Self-Attention)。掌握 Transformer 编码器 (Encoder) 和解码器 (Decoder) 的内部结构和工作原理。理解位置编码 (Positional Enc…...

编程日记 2025/8/12 17:49:55

使用MetaGPT 创建智能体（2）多智能体

先给上个文章使用MetaGPT 创建智能体（1）入门打个补丁： 补丁1： MeteGTP中Role和Action的关联和区别？这是这两天再使用MetaGPT时候心中的疑问，这里做个记录 Role（角色）和 Action&…...

编程日记 2025/8/12 14:58:20

数据结构学习笔记：树与二叉树详解

目录树的基本概念二叉树的定义与特性二叉树的存储结构 3.1 顺序存储 3.2 链式存储二叉树遍历特殊二叉树类型总结与应用场景一、树的基本概念核心定义树：由根节点和若干子树构成的层次结构。叶子节点（终端节点）：没有子节点的…...

编程日记 2025/8/11 5:31:09

基于大模型的直肠息肉诊疗全流程风险预测与方案优化研究报告

目录一、引言 1.1 研究背景与意义 1.2 研究目的与创新点二、大模型技术概述 2.1 大模型原理简介 2.2 大模型在医疗领域应用现状三、直肠息肉术前预测与准备 3.1 基于大模型的术前风险预测 3.1.1 息肉性质预测 3.1.2 手术难度预测 3.2 基于预测结果的术前准备 3.…...

编程日记 2025/8/14 1:15:11

Python作业4 文本词云统计，生成词云

编写程序，统计两会政府工作报告热词频率，并生成词云。 2025两会政府工作报告 import jieba import wordcloud from collections import Counter import re# 读取文件 with open("gov.txt", "r", encoding"gbk") as f:t …...

编程日记 2025/8/5 13:46:26

AI绘制流程图，方法概述

1 deepseek 生成图片的mermaid格式代码，在kimi中进行绘图或在jupter notebook中绘制： 或在draw.io中进行绘制（mermaid代码） 2 svg是矢量图，可以插入到word """mermaid graph TDA[基线解算] --> B[北…...

编程日记 2025/8/11 18:02:01

Netlink套接字

netlink套接字 Netlink套接字是专门用于用户控件与内核之间的通讯，尤其是监听uevent事件(热插拔，模块加载等)； socket(AF_NETLINK, SOCK_DGRAM | SOCK_CLOEXEC, NETLINK_KOBJECT_UEVENT); AF_NETLINK：Netlink协议族 SOCK_DGRAM…...

编程日记 2025/8/3 10:31:13

settimeout和setinterval区别

1. setTimeout：单次延迟执行语法： const timeoutId setTimeout(callback, delay, arg1, arg2, ...); 核心功能：在指定的 delay（毫秒）后，执行一次 callback 函数。参数： callback&#x…...

编程日记 2025/8/1 6:21:39

在排序数组中查找元素的第一个和最后一个位置--LeetCode

题目给定一个按照升序排列的整数数组 nums，和一个目标值 target。找出给定目标值在数组中的开始位置和结束位置。如果数组中不存在目标值 target，返回 [-1, -1]。示例 1： 输入：nums [5,7,7,8,8,10], target 8输出&#x…...

编程日记 2025/8/7 15:03:00

MySQL快速入门篇---库的操作

目录一、创建数据库 1.语法 2.示例二、查看数据库 1.语法三、字符集编码和校验（排序）规则 1.查看数据库支持的字符集编码 2.查看数据库支持的排序规则 3.查看系统默认字符集和排序规则 3.1.查看系统默认字符集 3.2.查看系统默认排序规则 …...

编程日记 2025/8/10 8:48:55

rancher 网红无法上传大视频，小于2m可以正常上传

rancher 部署的nginxphp7.4 架构阿里云oss rancher ingress 本次问题只需要修改php配置即可 nginx 通过映射配置文件直接修改 php 通过添加新的映射文件配置修改 ingress 可以rancher控制台修改yaml 文件 oss 不需要做配置 rootworker3:/data/nfs# sudo cat php/upload.in…...

编程日记 2025/8/11 2:58:31

Linux 文件查找终极指南：find, locate, grep 等命令详解

在 Linux 系统管理和日常使用中，文件查找是一项不可或缺的基本技能。无论是寻找配置文件、查找日志文件中的特定错误，还是清理旧的临时文件，掌握高效的文件查找工具都能让你事半功倍。Linux 提供了多种强大的命令行工具来满足不同的查找需求。本文将详细介绍几个最常用、最强…...

编程日记 2025/8/10 7:57:34

豆包语音合成文档入口：账号登录-火山引擎 #codingutf-8 requires Python 3.6 or later pip install requestsimport base64 import json import requests from playsound import playsoundtts_file_name"doubaotts.mp3" def doubao_tts(text):语音合成ap…...

编程日记 2025/8/12 19:35:38