表单提交本质是form元素submit行为触发HTTP请求，依赖action和method属性，name属性决定字段是否提交，需注意enctype、Content-Type与后端解析匹配。
表单提交本质是 form 元素的 submit 行为触发 HTTP 请求
浏览器原生表单提交不依赖 JavaScript，核心靠 <form></form> 标签的 action 和 method 属性。没配 action 时，表单会向当前 URL 提交；没写 method 默认用 GET。常见错误是漏写 name 属性——只有带 name 的控件（如 <input name="email">）才会被提交，id 或 class 不起作用。
容易踩的坑：
-
button类型默认是type="submit"，但显式写成type="button"就不会触发表单提交 -
<input type="image">或<button></button>内部有内容时，也会触发提交，别误以为只有<input type="submit">才行 - 如果表单里有
<input type="file">，必须把enctype设为"multipart/form-data"，否则文件字段为空
用 fetch 替代原生提交前要先阻止默认行为
想用 JavaScript 控制提交流程（比如加校验、显示 loading、处理 JSON 响应），就得监听 submit 事件并调用 event.preventDefault()。否则浏览器会立刻跳转或刷新页面，fetch 还没发出去就中断了。
实操建议：
- 绑定事件时用
form.addEventListener('submit', handler)，不要只绑在按钮上——回车提交也会触发form的submit - 用
new FormData(formElement)收集数据最稳妥，它自动忽略禁用字段、正确处理多选和文件，比手动读value可靠 -
POST提交时，fetch默认发text/plain，后端收不到字段；必须显式传body: new FormData(form)或手动构造URLSearchParams
form.addEventListener('submit', async (e) => {
e.preventDefault();
const data = new FormData(form);
const res = await fetch('/api/login', {
method: 'POST',
body: data // 自动设好 headers 和 enctype
});
});
GET 提交会把参数拼到 URL 上，敏感信息绝不能这么干
method="GET" 的表单提交等价于访问一个带查询参数的 URL，比如 /search?q=js&page=2。所有字段明文暴露在地址栏、历史记录、服务端日志甚至代理缓存里。密码、token、身份证号这类字段一旦用了 GET，基本等于公开。
使用场景限制很明确：
- 只用于无副作用的只读操作，比如搜索、分页、筛选
- 参数长度不能超过浏览器和服务器限制（通常 2KB 左右，IE 更低）
- 中文或特殊字符需确保页面编码是
UTF-8，否则encodeURIComponent处理可能出乱码
后端接收不到字段？先查 name 值和请求体格式是否匹配
前端看着提交成功，后端却收不到数据，90% 是字段名或编码格式对不上。比如前端用 application/json 发字符串，后端却按 application/x-www-form-urlencoded 解析；或者 name="user[email]" 这种嵌套写法，后端框架没开启深层解析支持。
调试关键点：
- 打开浏览器开发者工具的 Network 面板，点提交后的请求，看 Headers 里的
Content-Type和 Payload 内容是否符合预期 - 后端用
console.log(req.headers['content-type'])和原始 body（不是 parsed body）确认收到的是什么 - 如果用
FormData提交文件，后端必须用支持multipart的中间件（如 Express 的multer），普通body-parser完全无效
表单提交看着简单，但 name、enctype、Content-Type、后端解析逻辑这四者只要一个不匹配，数据就丢得无声无息。真出问题时，别急着改 JS，先盯死 Network 里的请求原始载荷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
