formmethod可覆盖表单method,但仅对type="submit"或type="image"元素生效,值只能是大小写不敏感的get或post,非法值如put/delete会被静默降级为get,无法实现restful请求。

能覆盖,但只对当前按钮生效,且仅限 get/post —— 不是万能开关,而是精准覆盖工具。
formmethod 只在 type="submit" 元素上起作用
它不会响应 type="button" 或普通 <button></button>,也不会影响 JS 调用的 form.submit()。只有点击时真正触发表单提交行为的元素才认这个属性。
-
<button type="submit" formmethod="post"></button>✅ 有效 -
<input type="submit" formmethod="get">✅ 有效 -
<button type="button" formmethod="post"></button>❌ 完全忽略 -
document.querySelector('form').submit()❌ 不走 formmethod 逻辑
值只能是 get 或 post,大小写不敏感
写 formmethod="GET"、formmethod="Post" 都行,但写 formmethod="PUT" 或 formmethod="delete" 会被浏览器静默降级为 GET,不是报错,而是“假装没看见”,容易误判。
- 后端如果依赖
PUT做幂等更新,用formmethod实现不了,必须用 fetch +method: 'PUT' - 想发
DELETE?同样不行,得靠 JS 手动发请求 - 表单默认 method 是
GET,所以没写formmethod的按钮,就继承这个默认值
多个按钮共用一个 action,但 method 和语义不同
这是最典型也最容易出错的场景:搜索用 GET,导出/提交用 POST,但都走同一个接口路径。
- 点“搜索” → 发起
GET /api/items?q=xxx,参数在 URL 上,可收藏、可刷新 - 点“导出全部” → 发起
POST /api/items,含完整表单字段(包括q),后端需注意是否要过滤或忽略该字段 - 如果“导出全部”不该带
q,不能靠删 DOM,得用 JS 清空或改用独立表单 ——formmethod不改变字段内容,只改提交方式
与 formaction、formtarget 搭配使用时的优先级
三者可以同时出现在一个按钮上,浏览器按“局部 > 全局”规则执行:按钮上的 formmethod 覆盖表单 method,formaction 覆盖表单 action,formtarget 覆盖表单 target。
- 它们互不干扰,各自负责自己的维度
- 比如:
<button type="submit" formmethod="post" formaction="/export" formtarget="_blank"></button>就是 POST 提交到新页 - 但要注意:如果
formaction指向跨域地址,而没配 CORS,页面会跳转但看不到响应 —— 这是浏览器限制,不是formmethod的问题
真正容易被忽略的是:formmethod 改变的只是 HTTP 方法,它不控制数据怎么编码(enctype)、不触发校验(required 仍由表单整体控制)、也不影响 JS 监听逻辑。你得清楚哪些事它管,哪些事它不管,否则调试时会反复怀疑是不是自己写错了。











