form提交无效的主因是action、method与后端路由不匹配，input缺name属性，或后端未配置express.urlencoded等解析中间件。
直接用 <form></form> 提交是最简单、最可靠的前后端交互起点，但多数人卡在“点了没反应”或“数据没到后端”，问题几乎都出在 action、method 和后端接收三者的不匹配上。
form 的 action 和 method 必须与后端路由严格对应
浏览器只认 action 指向的 URL 和 method 指定的 HTTP 动词。哪怕后端监听的是 /login，你写成 action="/login/"（多一个斜杠）或 action="login"（相对路径未补全），就可能 404；如果后端只写了 app.post('/login')，而你用了 method="GET"，请求根本不会进那个处理函数。
-
action应该是完整、可访问的后端端点，开发时建议用绝对路径，比如action="http://localhost:3000/login"或action="/api/login"（依赖当前域） -
method优先用POST：登录、注册、修改类操作绝不用GET，否则密码会暴露在 URL 和浏览器历史中 - 确保后端已启动，并且对应路由已注册——光写 HTML 不起作用，后端必须“在线等”
name 属性缺失 = 数据被浏览器自动丢弃
表单字段（<input>、<textarea></textarea>、<select></select>）没有 name，提交时浏览器根本不会把它打包进请求。这是最常被忽略的细节，尤其在快速写 demo 时容易漏掉。
- 每个要提交的字段都必须带
name，例如：<input type="text" name="username"> - 同名复选框（
name="hobby"多个<input type="checkbox">）会被后端解析为数组，前提是后端中间件支持（如 Express 的express.urlencoded({ extended: true })） - 不要混淆
id和name：id用于 CSS/JS 定位，name才决定是否参与提交
后端必须配置对应解析中间件，否则 req.body 是空的
用 method="POST" 提交时，数据默认以 application/x-www-form-urlencoded 格式发过去。Node.js（Express）这类框架不会自动解析它，必须显式启用中间件，否则 req.body 始终是 {}。
- Express 用户需加这一行（通常放在
app.use()链中）：app.use(express.urlencoded({ extended: true })) - 如果还上传文件，额外加：
app.use(express.multipart())或用multer - Flask 默认能解析表单，但要用
request.form['xxx']而不是request.json；PHP 直接读$_POST['xxx']
想不刷新页面？必须阻止默认行为，且别监听错事件
用 JavaScript 拦截表单提交实现无刷新，关键不在“怎么发请求”，而在“怎么不让浏览器先跳走”。90% 的失败是因为监听了按钮的 click，而不是表单的 submit 事件，或者忘了 e.preventDefault()。
- 正确绑定位置：
document.querySelector('form').addEventListener('submit', e => { e.preventDefault(); /* 后续逻辑 */ }) - 错误示范：
document.querySelector('button').addEventListener('click', ...)—— 此时表单已在点击瞬间提交并刷新 - 若用
fetch发送 JSON，记得设置Content-Type: application/json，后端也要相应改解析方式（比如 Express 用express.json()）
真正卡住人的往往不是技术多难，而是 action 指向了不存在的路径、某个 input 忘了写 name、或者后端少配了一行 urlencoded 中间件——这三处检查完，80% 的“提交无效”问题就解决了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
