formmethod属性仅对type="submit"或type="image"的控件生效,用于临时覆盖表单method值为get或post,必须配合formaction使用且仅在原生提交时起作用。

formmethod 属性只对 type="submit" 有效,type="button" 不会触发提交
很多开发者误以为只要加了 formmethod 就能改请求方式,结果点击没反应——根本原因是按钮类型不对。type="button" 完全不参与表单提交,formmethod 对它毫无意义。必须用 type="submit",且该按钮需在 <form> 内(或通过 form 属性关联到某个表单)。
常见错误现象:formmethod="post" 写了但实际仍发 GET 请求,往往是因为浏览器回退到表单默认的 method,或者按钮没绑定到正确表单。
- 确保按钮是
<button type="submit">或<input type="submit"> -
formmethod只在点击该按钮时生效,不影响其他提交控件 - 若按钮不在
<form>标签内,必须显式指定form="form-id"指向目标表单
formmethod 会覆盖 <form> 的 method 属性,但仅限本次提交
formmethod 的作用是“临时覆盖”,不是永久修改表单配置。它只影响当前按钮触发的这一次请求,下一次点击其他提交按钮(或同一按钮但未带 formmethod)仍按 <form method="..."> 执行。
使用场景举例:一个用户资料页,主表单设为 method="get" 用于搜索;但“删除账号”按钮需要走 POST,且不能改变整个表单行为,这时就靠 formmethod="post" 隔离风险。
立即学习“前端免费学习笔记(深入)”;
-
formmethod="get"和formmethod="post"是唯二被广泛支持的值;put/delete等在多数浏览器中会被降级为get或直接忽略 - 服务端必须能接收对应 method 的请求,否则 405 错误不可避免
- 注意:HTML 规范允许
formmethod,但部分老旧浏览器(如 IE10 及以下)不支持,需降级处理
与 JavaScript 的 fetch/AJAX 混用时,formmethod 失效
如果给按钮绑了 onclick="event.preventDefault(); fetch(...) ",那 formmethod 就完全没机会执行——因为原生表单提交被阻断了。这时候请求方式由 JS 控制,跟 HTML 属性无关。
容易踩的坑是:开发者一边写 formmethod="post",一边又加 onsubmit="return false" 或阻止默认行为,结果发现请求还是 GET,还以为是属性写错了。
- 二者选其一:纯 HTML 表单提交(靠
formmethod),或纯 JS 提交(靠fetch或XMLHttpRequest) - 若想保留表单语义又用 JS 增强,应在
submit事件里读取event.submitter.formMethod(现代浏览器支持),而不是依赖formmethod自动生效 -
formmethod不会改变event.submitter.formAction或event.target.form.method,这些仍反映原始表单设置
formmethod="post" 提交时,GET 参数会被丢弃
当表单本身是 method="get",而某个按钮用了 formmethod="post",点击后所有字段仍会提交,但 URL 查询参数(比如手动拼在 action 后的 ?id=123)不会自动合并进 POST body —— 它们只存在于 URL 中,服务端需从 request.url 解析,而非 request.body 或 request.form。
这常导致后端拿不到预期参数,尤其在 RESTful 场景下,路径参数和查询参数容易混淆。
- 安全起见,把关键标识(如
user_id)放在 hidden input 里,而非依赖 URL query - 如果 action 是动态生成的(如
action="/api/user?_method=delete"),formmethod="post"不会帮你把_method当作 body 字段发送,得额外处理 - Chrome 和 Firefox 对这种混合行为表现一致,但某些 WebKit 变体可能截断 URL 中的 query,不可依赖
formmethod 的边界很窄:它只在原生提交链路中起作用,一旦引入 JS、URL 参数、跨浏览器兼容或服务端路由约定,就很容易掉进隐性陷阱。最稳妥的做法,是让每个提交动作的 method、action、参数来源都清晰可追溯,而不是靠单一属性“悄悄覆盖”。



















