表单提交不能直接保存到数据库，必须经后端接收并参数化执行sql插入；前端需拦截提交、用fetch发送请求、处理响应与错误，后端须校验数据、复用连接、捕获数据库约束异常并返回友好http错误。
表单提交本身不直接保存到数据库
HTML 表单（<form></form>）只能把数据发给服务器，它没有能力连接或写入数据库。所谓“提交到数据库”，实际是：浏览器发请求 → 后端程序接收 → 后端用数据库驱动（如 mysql2、pg、sqlite3）执行 INSERT 语句。如果跳过后端直接让 HTML 操作数据库，那是不可能的，也是严重安全风险。
必须有后端服务接收 POST 请求
前端 <form method="POST" action="/api/submit"></form> 提交后，必须存在一个运行中的后端接口（比如用 Node.js + Express、Python + Flask、PHP 等）监听 /api/submit 路径，并解析请求体：
- 确保
Content-Type是application/x-www-form-urlencoded或multipart/form-data（文件上传时） - 使用对应中间件解析：Express 需
express.urlencoded()和express.json()；Flask 默认可读request.form - 别忘了校验
req.body字段是否存在、类型是否合法（例如email不能是空字符串）
数据库写入必须参数化，严禁拼接 SQL
常见错误是把用户输入直接插进 SQL 字符串里，比如："INSERT INTO users (name) VALUES ('" + req.body.name + "')" ——这等于敞开 SQL 注入大门。正确做法是使用参数占位符：
// Node.js + mysql2 示例 const sql = 'INSERT INTO users (name, email) VALUES (?, ?)'; await conn.execute(sql, [req.body.name, req.body.email]);
- 所有用户输入（
req.body.xxx、req.query.xxx、req.params.xxx）都必须作为参数传入，不可拼接 - 使用 ORM（如 Prisma、Sequelize）也能自动防止注入，但需确认其底层调用的是参数化查询
- 数据库连接要复用（如用连接池），不要每次请求都
new Client()或createConnection()
前端需处理提交反馈与错误边界
只写 <form></form> 不加 JS 控制，用户点击提交后页面会跳转或刷新，无法知道成功还是失败。建议：
- 用
event.preventDefault()拦截原生提交，改用fetch()发送 JSON - 检查响应状态：
if (res.status === 201)再清空表单或跳转；否则显示res.json().message - 禁用提交按钮防止重复点击：
button.disabled = true，成功/失败后恢复 - 服务端返回的错误信息（如
{"error": "email already exists"}）应原样透出，前端只负责展示，不自行翻译或掩盖
最常被忽略的一点：数据库字段约束（如 UNIQUE、NOT NULL）触发的报错，后端必须捕获并转成 HTTP 可读错误（如 400），不能让 SQLITE_CONSTRAINT 或 ER_DUP_ENTRY 直接暴露给前端控制台。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
