HTML中button的formmethod怎么实现部分按钮改用PUT提交-html教程-PHP中文网

formmethod="put"不被html原生支持，浏览器会降级为post；真正实现put需后端识别_method隐藏字段或前端用fetch/xhr发起真实put请求。

html中button的formmethod怎么实现部分按钮改用put提交

formmethod="put" 本身不被 HTML 原生支持

HTML 规范只允许 formmethod 的值为 get 或 post，put、delete 等是非法值，浏览器会自动降级为 post（甚至可能报警告）。直接写 formmethod="put" 不会触发 PUT 请求。

真正生效的 PUT 提交必须靠后端配合 + 前端模拟

浏览器表单原生只发 GET/POST，想发 PUT，本质是“用 POST 模拟 PUT”，关键在两点：请求方法伪造 + 后端识别。常见做法是：

前端把按钮的 formmethod 改成 post（合法），同时在表单里加一个隐藏字段，比如 <input name="_method" value="put" type="hidden">
后端框架（如 Laravel、Rails、Express + method-override）识别到 _method=put，就将本次 POST 请求“重写”为 PUT 处理
如果不用框架中间件，就得自己解析该字段并手动 dispatch 到 PUT 路由逻辑

纯前端不依赖后端时，只能用 fetch 或 XMLHttpRequest

若后端不支持 _method 伪造，又必须发真实 PUT，就不能用 <button type="submit"></button> 触发表单提交——得拦截默认行为，手动生成请求：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<button type="button" data-url="/api/users/123">更新用户</button>
<script>
document.querySelector('button[data-url]').addEventListener('click', async (e) => {
  const url = e.target.dataset.url;
  const response = await fetch(url, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'Alice', email: 'a@example.com' })
  });
});
</script>

注意：type="button" 是必须的，否则仍会触发表单提交；fetch 不会自动携带 cookie（需显式加 credentials: 'same-origin'）；CSRF token 需手动注入 header 或 body。