表单提交失败的首要原因是html结构错误：submit按钮必须在form内，控件需有name属性，radio/checkbox需设value，form必须含action属性；method决定数据位置（get在url、post在body），enctype影响文件上传。
form 标签的 method 和 action 属性直接决定表单是否能发出去、数据长什么样、服务器能不能收到——没设对，点提交按钮就等于白按。
为什么点 submit 按钮没反应？
常见原因不是 JS 写错了，而是 HTML 结构本身就不满足浏览器默认提交前提：
-
submit按钮必须在form标签内部；放在外面就完全无效 - 所有要提交的控件（
input、textarea、select）必须带name属性；没name的字段，浏览器根本不会打包发送 - 单选/复选框（
type="radio"/type="checkbox"）必须有value，否则传过去的是空字符串或on -
form标签缺失action属性时，会提交到当前 URL；如果当前是file://协议或纯静态页，多数浏览器直接静默失败
GET 和 POST 在实际请求里到底差在哪？
不只是“URL 里有没有参数”这种表面区别，关键看浏览器怎么组织 HTTP 请求：
-
method="GET"：浏览器把所有name=value拼成查询字符串，加到actionURL 后面，用?连接；请求体（body）为空；Content-Type不会被设置 -
method="POST"：数据全塞进请求体；默认编码是application/x-www-form-urlencoded（和 GET 的 query string 格式一样，只是不在 URL 里）；若含文件上传，必须显式设enctype="multipart/form-data"，否则input type="file"的内容根本不会发出去 - GET 请求长度受限（通常 URL 总长 ≤ 2048 字符），POST 理论上无限制，但服务端可能设 body 大小上限（如 Nginx 默认 1MB）
用 JavaScript 提交时，submit() 和 fetch() 别混用
直接调 form.submit() 是模拟原生提交，不走 JS 事件流，onsubmit 里的验证逻辑、event.preventDefault() 全部失效；而 fetch() 是全新构造请求，得自己处理数据序列化：
- 想保留原生行为（比如自动跳转、文件上传、浏览器级验证提示），就用
form.submit()，但别在onsubmit里调它——会无限递归 - 要用
fetch()，推荐用new FormData(formElement)构造 body；它能自动处理文本+文件混合场景，且不用手动设Content-Type（浏览器会加正确的multipart/form-data; boundary=...） - 手动拼 JSON 发送时，后端必须明确读取
application/json类型 body；HTML 原生表单默认不发 JSON，除非你彻底绕过form标签自己组装
回车键提交经常失效，其实只跟两件事有关
浏览器不是“看到 input 就回车提交”，而是有一套严格判定逻辑：
- 焦点必须在可编辑元素上（
input、textarea），且该元素不在contenteditable或自定义组件里 - 表单内必须至少有一个
type="submit"按钮（button或input都行）；没有的话，回车键完全没反应 -
textarea换行用Shift+Enter，直接回车就是提交——这点容易被当成 bug，其实是规范行为 - 多个
form嵌套或动态插入表单时，浏览器可能找不到“所属表单”，导致回车失效；此时显式给input加form="form-id"属性绑定更可靠
最容易被忽略的是：表单提交成功与否，第一道关卡不在 JS，而在 name、action、enctype 这三个属性是否写对、写全——它们错了，后面所有逻辑都建立在空中楼阁上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
