method属性值必须小写,规范要求使用get或post;省略时默认为get,易致敏感数据泄露;后端框架路由匹配通常大小写敏感,fetch等js请求也需小写method值。

method 属性值必须小写
HTML 表单的 method 属性值是大小写敏感的,且规范强制要求使用小写:get 或 post。浏览器虽常宽容地将 GET、Post 甚至 POST 视为有效,但这是靠解析器“纠错”而非标准行为。
实际风险在于:某些严格模式环境(如 XHTML 解析、部分 Web Components 框架、或服务端中间件做字符串精确匹配时)会直接拒绝大写的 method 值,导致表单提交失败或退化为默认 get。
-
<form method="GET"></form>→ 不推荐,依赖容错 -
<form method="get"></form>→ 正确,符合 HTML5 规范 -
<form method="Post"></form>→ 可能被忽略,后端收不到POST请求头
form 元素 method 默认值是 get
省略 method 属性时,浏览器一律按 get 处理,不会读取 action URL 协议或后端配置来推断。这点容易被误以为“自动适配”,结果敏感数据(如密码、token)意外暴露在 URL 和日志中。
尤其注意:前端框架(如 Vue/React)动态生成表单时,若逻辑分支遗漏 method 设置,或服务端模板渲染未显式输出该属性,就可能掉进这个坑。
- 没写
method→ 等价于method="get" -
get提交的数据出现在 URL 查询参数中,有长度限制(通常 2KB 左右),且不加密 -
post数据在请求体中,无 URL 长度限制,更适合文件上传或含敏感字段的场景
服务端对 method 的校验通常区分大小写
Node.js(Express)、Python(Flask/Django)、PHP(原生或 Laravel)等主流后端框架,在路由匹配或中间件拦截时,默认对 HTTP 方法名做大小写敏感比对。例如 Express 的 app.post('/login') 不会响应 POST 大写请求(虽然 HTTP 协议本身不区分,但框架实现层做了约束)。
这意味着:即使前端写了 <form method="POST"></form>,后端仍可能因路由未注册大写形式而返回 404 或 405。
- Express 中
app.post()只匹配小写post请求 - Flask 的
@app.route('/api', methods=['POST'])同样只认小写字符串 - 调试时可抓包确认实际发出的请求方法(如 Chrome DevTools Network 标签页),避免被“看起来正常”误导
fetch / XMLHttpRequest 提交不受 form method 属性影响
当用 JS 手动发起请求(如 fetch()、XMLHttpRequest)时,<form></form> 元素上的 method 属性完全无效——它只对原生表单提交起作用。这时候方法由 JS 代码显式指定,比如 fetch(url, { method: 'POST' })。
常见混淆点:有人以为给表单设了 method="post",再调用 form.submit() 就能触发 POST;这没错。但若改用 fetch() 提交同一组数据,就必须在 JS 里写死 method: 'POST',且注意大小写。
-
form.submit()会尊重表单自身的method属性(前提是小写) -
fetch()的method选项也必须小写,否则部分运行时(如某些 Deno 版本、旧版 Safari)会报错或静默降级 - 不要混用:别在 JS 里读
form.method再拼成fetch(..., { method: form.method.toUpperCase() })
最易被忽略的是:本地开发时一切正常,上线后因 CDN、网关或 WAF 对 HTTP 方法做标准化处理(比如强制转大写),反而让后端路由失配。建议前后端约定统一用小写,并在 CI 流程中加入 HTML 模板 lint(如 eslint-plugin-jsx-a11y 或 html-validate)检查 method 值是否合规。











