表单action是请求发出的关键开关，填错会导致404/405；method决定数据传输位置与语义，非安全与否；不写action会提交到带query和hash的当前URL；formaction可覆盖action但仅对submit按钮生效。
action 值填错，表单根本发不出去
action 不是“可有可无”的装饰属性，它是表单能否发出请求的开关。填空、填错路径、大小写不一致，都会导致浏览器发请求时 404 或 405 —— 后端连日志都收不到。
常见错误现象：
-
action="api/submit"在/admin/user/edit.html页面里，实际请求变成/admin/user/api/submit（不是你想要的根目录接口） -
action="./api/submit"写成action="./api/submit/"（末尾斜杠触发重定向或 404） -
action="/login"在部署到子路径如https://example.com/app/时，请求发到了https://example.com/login（漏了前缀）
实操建议：
- 开发阶段统一用
./api/xxx：语义明确，相对当前 HTML 文件位置解析，不易被嵌套路径带偏 - 生产环境用
/api/xxx：前提是 Nginx/Apache 配了根代理，且所有页面都部署在域名根下 - 跨域必须用完整 URL：
action="https://api.example.com/v1/login"，此时后端必须配好 CORS 或前端走代理 - 绝对不要写
action="."或action="./"：部分浏览器会拼出https://site.com/./这种非法路径
method="get" 和 method="post" 不是安全 vs 不安全的二选一
GET 和 POST 的本质区别是数据传输位置和语义，不是“加密等级”。把密码用 GET 发，URL 里明文可见；但用 POST 发，不代表自动加密——它只是没出现在地址栏，仍可能被中间人截获（除非 HTTPS）。
立即学习“前端免费学习笔记（深入）”；
使用场景决定 method：
- 搜索、筛选、分页等只读操作 →
method="get"：方便书签、分享、浏览器缓存，参数自然暴露在 URL 中 - 登录、注册、修改、上传 →
method="post"：避免敏感信息入历史记录，也绕过 URL 长度限制（GET 通常限 2KB） - DELETE / PUT 类操作 → 不要用原生
form：HTML form 只支持get和post，想发 DELETE 必须用 JS 手动 fetch
容易踩的坑：
- 写了
method="post"，但后端只监听GET /login→ 返回 405 Method Not Allowed - 用
method="get"提交大段文本（比如富文本编辑器内容）→ 被浏览器截断或报 414 URI Too Long - 没设
enctype就传文件 → 即使method="post"，默认enctype="application/x-www-form-urlencoded"无法发送二进制数据
不写 action 或写成 action=""，行为比你想的更复杂
没写 action 或写成 action=""，浏览器会把表单提交到 document.location.href —— 注意，是**带 query string 和 hash 的完整 URL**，比如当前页是 https://site.com/edit?id=123#tab2，提交就会发到这个地址，不是 https://site.com/edit。
这意味着：
- 后端必须监听这个带参数的完整路径的 POST 请求，否则 404
- 如果页面用了前端路由（Vue Router / React Router），
action=""仍会触发真实跳转，破坏 SPA 体验 - 服务端 PHP/Python 收到请求后，得自己 parse URL 中的 query string，再处理表单 body，逻辑耦合变重
实操建议：
- 明确知道要提交给自己 → 用
action=""，但后端代码得兼容该 URL 的 POST 处理 - 不想跳转、又要降级兜底 →
action="/api/submit"+ JS 拦截event.preventDefault()，再用fetch发送，这样 JS 失效时仍能原生提交 - 纯前端交互表单（如搜索过滤）→ 根本不用
form，直接用input+change/input事件更轻量
formaction 属性能覆盖全局 action，但只对按钮生效
formaction 是 HTML5 新增的属性，允许单个提交按钮指定自己的提交地址，优先级高于 form 标签的 action。但它只作用于 <input type="submit">、<button type="submit"> 和 <input type="image">。
典型用法：
<form action="/default-handler"> <input name="id" value="123"> <input type="submit" value="保存" formaction="/api/update"> <input type="submit" value="删除" formaction="/api/delete"> <button type="submit" formaction="/api/export">导出</button> </form>
注意点：
-
formaction的值同样遵循相对/绝对路径规则，也要小心大小写和斜杠 - 它不改变
method，按钮仍沿用form的method，如需不同 method，必须用 JS - 多个按钮共用同一份表单数据，但发往不同 endpoint，后端需各自处理字段含义（比如删除按钮不需要提交全部字段）
- 别在非 submit 元素上加
formaction：无效，浏览器忽略
action 和 method 看似简单，但路径解析规则、浏览器兼容细节、前后端协同约定，每一处都容易卡住调试节奏。最常被忽略的是：**表单提交是个完整 HTTP 请求链，任何一环（前端路径、HTTP 方法、后端路由、CORS、代理配置）出问题，Network 面板里就看不到那个请求**。先盯住 DevTools Network，再查代码，比猜更省时间。 
