详解HTML中input标签的formmethod属性：覆盖原表单的提交方式

formmethod仅对type="submit"或type="image"有效，值只能是小写的get或post，需配合formaction使用，且仅在原生表单提交时生效。

formmethod 只对 type="submit" 生效，其他 type 一律忽略

很多人给 <button> 或 <input> 加了 formmethod 却没效果，第一反应是浏览器不兼容，其实八成是类型写错了。它只响应 type="submit" 或 type="image" 的控件，type="button"、type="text"、甚至没写 type 的 <button> 都完全无视该属性。

常见错误现象：

• <button formmethod="get">预览</button> —— 缺 type="submit"，无效
• <input type="button" formmethod="post" value="提交"> —— type 不匹配，被浏览器静默丢弃
• <form method="post"><button type="submit" formmethod="GET">预览</button></form> —— GET 大写，在部分旧浏览器中降级为表单默认 method

formmethod 值只能是 get 或 post，其他如 delete/put 会被静默降级

HTML 原生表单不支持 DELETE、PUT 等方法，formmethod 也不例外。如果你写了 formmethod="delete"，Chrome、Firefox 会直接当没看见，按 <form> 的 method 走；Safari 可能降级为 GET；IE 10+ 则干脆忽略整条属性。

所以别指望靠 formmethod 实现 RESTful 操作——后端要接 DELETE，前端必须用 JS 拦截提交，比如 event.preventDefault() + fetch() 手动发请求。

立即学习“前端免费学习笔记（深入）”；

真正可用的值只有两个：

• get（小写，全小写）
• post（小写，全小写）

大小写敏感不是建议，是实际行为：某些 Android WebView 或旧版 Safari 会把 POST 当作非法值处理。

不配 formaction，formmethod 就等于白设

formmethod 只改请求方法，不改地址。哪怕你点了「取消」按钮并加了 formmethod="get"，只要没配 formaction，数据照样发往 <form action="/save">，只是变成 GET 请求——参数全拼在 URL 上，后端如果只读 $_POST 或 req.body，就收不到任何东西。

正确写法必须成对出现：

• <button type="submit" formmethod="get" formaction="/preview">预览</button>
• <input type="submit" formmethod="post" formaction="/save">
• <button type="submit" formmethod="get" formaction="">重置</button> —— 注意：formaction="" 不生效，会回退到 <form> 的 action

另外，formaction 优先级高于 <form> 的 action，且每个按钮可独立指定，互不影响。

它只影响原生提交，JS 提交时彻底失效

一旦你在表单上绑了 submit 事件并调用了 event.preventDefault()，或者用 fetch() / axios 手动发请求，formmethod 和 formaction 就只是 HTML 字符串里的普通属性，浏览器不会读取、不会解析、也不会应用。

这意味着：

• 你不能靠它“切换” JS 提交的 method；得自己在 JS 里判断按钮类型，再决定用 POST 还是 GET
• 后端接口必须显式支持对应 method：比如 formmethod="get" 提交，后端就得从 query string 里取值，而不是 body
• IE9 及更早版本完全不识别 formmethod，需要 fallback 方案，比如监听按钮 click 后动态改 form.method 和 form.action

最容易被忽略的点是：它只在“用户点击 submit 按钮 → 浏览器发起原生 HTTP 请求”这个路径下起作用。现代项目里这条路径越来越短，多数时候它只是个优雅降级的备用方案，不是主力逻辑。