form 的 action 必须用绝对路径如 "/api/submit"，method 必须显式写 "post"，含文件上传时需设 enctype="multipart/form-data"，submit 事件须绑定 form 并首行 preventDefault。
form 的 action 属性必须写对，否则请求根本发不到后端
浏览器不会自动补全或纠错 action 值，写错路径就 404，而且这个 404 很容易被误判为“后端没写好”。
常见错误现象：
-
action="api/submit"（缺开头/）→ 浏览器拼成当前页面路径下子路径，比如从/user/profile提交，实际发到/user/profile/api/submit -
action="./api/submit"→ 依赖当前 HTML 文件所在目录，部署时路径一变就失效 -
action留空或不写 → 默认提交到当前 URL，大概率触发 405 Method Not Allowed（因为当前页是 GET，但后端只监听 POST）
实操建议：
- 统一用绝对路径：
action="/api/submit"（以/开头，从域名根开始） - 跨域必须写全协议+域名：
action="https://api.example.com/submit"，且后端需配置 CORS - 本地开发用代理（如 vite 的
proxy或 webpack 的devServer.proxy）比硬写http://localhost:3000更可靠
method="post" 不是默认值，漏写就会走 GET 导致参数丢失
HTML 规范里 method 的默认值确实是 GET，但绝大多数后端接口只接受 POST，漏写 method="post" 就等于把密码、文件、长文本全塞进 URL —— 要么被截断，要么暴露在日志里。
使用场景决定 method：
- 搜索、筛选、分页：用
method="get"，方便链接分享和浏览器前进/后退 - 登录、注册、上传、修改数据：必须显式写
method="post" - 含
<input type="file">：只能用POST，且必须加enctype="multipart/form-data"
性能与兼容性影响：
- GET 请求受 URL 长度限制（通常 ≤2KB），超长字段会被静默截断
- POST 请求体无此限制，但若后端没配好解析中间件（如 Express 缺
multer），req.body就是空对象
enctype 决定数据怎么打包，传文件不设它就收不到
enctype 是表单序列化的“编码开关”，不是可选项。它不控制传输安全，只控制浏览器怎么把字段拼成 HTTP 请求体。
三个常用值的区别：
-
application/x-www-form-urlencoded（默认）：所有字段 URL 编码后拼成key1=value1&key2=value2，适合纯文本 -
multipart/form-data：每个字段独立为一个 part，支持二进制（如图片、PDF），只要含<input type="file">，就必须设这个值 -
text/plain：几乎不用，仅用于调试，字段不编码、不转义，空格变+，换行乱码
容易踩的坑：
- 写了
enctype="multipart/form-data"但后端没启用 multipart 解析（如 Node.js + Express 忘装multer），req.body和req.file全为空 - 用 fetch 自定义提交时，手动设了
Content-Typeheader，反而破坏浏览器自动设置的boundary，导致后端无法解析
submit 事件监听必须绑 form 上，且第一行就要 preventDefault
想用 JS 拦截表单、加 loading、做异步提交，却点了按钮没反应？八成是事件没绑对位置，或者忘了阻止默认行为。
常见错误现象：
- 给按钮绑
click事件 → 绕过浏览器原生验证（required、type="email"失效） - 绑了
submit但没调e.preventDefault()→ 页面跳转或刷新，fetch 请求可能发出去了但你看不到响应 - 按钮没写
type="submit"→ 某些浏览器默认是submit，某些是button，行为不一致
实操要点：
- 监听
<form></form>元素的submit事件，不是按钮的click - 回调函数第一行必须是
e.preventDefault() - 确保表单 DOM 已存在再绑定：动态渲染（React/Vue）要等组件挂载后再加监听
- 检查是否有嵌套
<form></form>：HTML 标准禁止嵌套，会导致事件冒泡异常
最常被忽略的一点：表单提交不是“前端发个请求”就完了，而是浏览器、HTTP 协议、后端框架三方按约定一步步拆包。少一个 /、漏一个 type="submit"、忘设 enctype，数据就卡在半路，还查不出错在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
