HTML模板仅生成静态form结构，提交由浏览器触发；需确保action为有效HTTP URL（非本地路径）、method与后端接口严格匹配（如@PostMapping），且所有表单项含name属性，否则数据无法发送。
HTML 模板本身不处理表单提交，它只负责生成带有 form 标签的静态结构；真正触发提交、构造请求、决定跳转或刷新行为的是浏览器——前提是 form 的 action 和 method 配置正确且指向可执行的服务端地址。
form 的 action 必须是服务端可解析的 URL，不是本地文件路径
常见错误是写成 action="login.php" 或 action="./api/login"，在双击打开 HTML 文件（file:// 协议）时，浏览器根本不会发 HTTP 请求，而是尝试下载或用编辑器打开该文件。这和“后端没跑”“PHP 未启用”“SpringBoot 接口 404”是同一类根因。
- 本地开发时，
action应为完整 HTTP 地址，例如：action="http://localhost:8080/login"（对应 SpringBoot 默认端口）或action="http://127.0.0.1:5000/submit"（对应 Flask/FastAPI） - 若用 Nginx/Apache 代理，确保
action与反向代理配置的 upstream 一致，不要混用localhost和127.0.0.1（某些环境 DNS 解析行为不同） - 避免相对路径如
action="api/login"：它会拼接到当前页面 URL 后，容易因路由层级错位导致 404
method="post" 时，后端必须匹配 @PostMapping 或 doPost()
前端 form 设为 method="post"，后端却用 @GetMapping 或只写 @RequestMapping（默认支持 GET），会导致 405 Method Not Allowed。SpringBoot 中尤其要注意注解粒度。
- SpringBoot 推荐显式使用
@PostMapping("/login")，而非@RequestMapping(value = "/login", method = RequestMethod.POST)，更不易漏掉 method 限定 - Servlet 里必须重写
doPost()，不能只写doGet()；否则表单 POST 提交会进doGet()并报错或返回空响应 - 注意参数绑定方式：SpringBoot 中
@RequestParam可接收表单键值对，@ModelAttribute适合封装对象，但字段名必须与input name="xxx"完全一致（包括大小写）
提交后页面跳转 or 局部刷新？取决于你是否阻止了默认行为
原生 form 提交一定会触发页面跳转或刷新——这是浏览器默认行为。想实现无刷新（比如弹提示、更新某块 DOM），必须用 JavaScript 拦截并改用 fetch 或 XMLHttpRequest。
- 保留原生提交：适合管理后台登录页、搜索页等简单场景，后端返回完整 HTML 即可，无需 JS
- 改用 JS 提交：需在
submit事件中调用event.preventDefault()，再手动收集input值，用fetch()发送 JSON 或表单数据 - 注意 enctype：如果表单含
type="file"，必须设enctype="multipart/form-data"，且 JS 提交时要用FormData对象，不能直接JSON.stringify
调试时优先检查 Network 面板里的 Request Payload 和 Response
很多联调问题卡在“不知道数据到底发没发出去”或“后端返回了什么但没看到”。打开浏览器 DevTools → Network → 找到对应请求，重点看三栏：
-
Headers：确认
Request URL是预期地址，Request Method是 POST，Content-Type是application/x-www-form-urlencoded（原生表单）或multipart/form-data（带文件） -
Preview / Response：看后端是否返回了预期内容，比如
"登录成功"文本，或一段 HTML，或 JSON 错误信息（如{"code":400,"msg":"用户名不能为空"}） -
Form Data（非 JS 提交时）：展开后应能看到所有带
name属性的input值，若为空，说明前端没填、没设name，或被 JS 清空过
name 属性缺失是最隐蔽也最常被忽略的一环：没有 name，浏览器就不会把它加入提交数据，后端永远收不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
