HTML表单在前后端分离项目中仅负责描述输入结构和提交路径，不承担验证、数据处理或错误渲染职责；所有验证需前后端协同，前端用JS友好提示并阻止默认提交，后端严格校验并返回JSON错误信息，表单action与method必须严格匹配RESTful接口定义。
HTML 表单在前后端分离项目中不负责验证、不处理数据、也不渲染错误信息——它只做一件事：描述用户要填什么、以什么方式提交。
表单的 HTML 文件里不该出现 PHP 或 JS 验证逻辑
常见错误是把 process.php 的验证代码直接塞进 index.html 里，比如用 require 'validate.php' 包含后端逻辑，或在 <script> 里写一堆正则校验。这会让 HTML 文件承担本该由后端接口或前端框架（如 Vue 的 v-model + onSubmit）处理的职责。
- 表单提交应始终指向一个明确的 API 路径（如
/api/users），而不是process.php这类服务端脚本路径 - 所有字段级验证（邮箱格式、必填、长度）应由前端 JavaScript 在提交前触发，但仅作友好提示；后端必须重复校验，不能信任前端输入
- 错误信息（如 “邮箱已被注册”）只能由后端接口返回 JSON，前端用 JS 动态插入到对应
<span class="error"></span>中，不能靠 PHPecho拼进 HTML
form action 和 method 必须匹配后端 RESTful 接口定义
如果后端用 Spring Boot 定义了 @PostMapping("/api/register")，那 HTML 表单的 action 就必须是 /api/register，且 method 必须为 POST。不匹配会导致 405 Method Not Allowed 错误。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不要用
GET提交含敏感字段（密码、邮箱）的表单，即使只是调试 - 若后端要求带 CSRF token，需在表单中添加隐藏域：
<input type="hidden" name="_csrf" value="<?php echo $token; ?>">，但前提是前端能安全获取该 token（通常由后端首次渲染页面时注入） - 前后端约定好 Content-Type：HTML 表单默认发
application/x-www-form-urlencoded，若后端只接受application/json，就必须用 JS 阻止默认提交，再用fetch()手动构造请求
前端 JS 提交时需接管默认行为并处理响应
直接让浏览器用原生 form 提交，在前后端分离架构下几乎总是错的——它会强制跳转、无法捕获 JSON 响应、也不能做 loading 状态控制。
立即学习“前端免费学习笔记（深入）”；
- 必须用
event.preventDefault()阻止默认提交 - 用
FormData对象读取表单值更安全：const data = new FormData(formEl); fetch('/api/login', { method: 'POST', body: data }) - 响应处理要区分状态码：
if (res.status === 400)解析错误字段并高亮对应输入框；if (res.status === 201)跳转或清空表单 - 避免在 JS 里硬编码字段名，比如
data.email；优先用data.get('email')，这样表单结构变时 JS 不用改
最容易被忽略的是“表单是否该有初始值”。前后端分离下，HTML 表单本身不加载数据；初始值必须由前端 JS 发起 GET 请求（如 /api/user/123）后填充，否则编辑场景就无法复用同一份 HTML 结构。
