必须写type="submit"(小写),大小写敏感;更推荐<button type="submit">,因其支持嵌套内容、样式稳定且语义清晰。

直接写 type="submit",大小写敏感,不能写成 SUBMIT 或 Submit;但更推荐用 <button type="submit">,它比 <input type="submit"> 更可控、更易维护。
type="submit" 必须小写,且只认这个值
浏览器对 type 属性值是严格区分大小写的。只有 type="submit" 是 HTML 规范定义的合法值。type="SUBMIT" 在部分浏览器里“看起来能用”,但属于非标准行为,Safari 或旧版 Edge 可能完全忽略,导致按钮点击无反应。
-
type="submit"✅ 标准写法,所有浏览器一致支持 -
type="Submit"❌ 非标准,不保证兼容性 -
type="SUBMIT"❌ 同上,别依赖“碰巧能跑” - 没写
type的<input>默认是type="text",不是 submit —— 它根本不会提交
button type="submit" 为什么比 input type="submit" 更好用
<button type="submit"> 不是“替代方案”,而是现代开发的事实标准。它解决的是 <input> 天然无法绕过的限制:
-
<input type="submit" value="登录">的文字只能是纯文本,没法加<i>图标、<svg>或换行 -
<button type="submit"><svg>...</svg> 登录</button>支持任意嵌套结构,样式也更稳定(比如padding和line-height在各浏览器中表现一致) - 即使你只写
<button>提交</button>(没写type),在<form>内它也会默认当submit用 —— 但这是隐患:IE 默认是button,其他浏览器默认是submit,行为不统一 - 所以必须显式写
type="submit",哪怕看起来多余
按钮点不动?先查这三件事
不是 type 写错了,而是上下文没配对。常见“点了没反应”的真实原因:
立即学习“前端免费学习笔记(深入)”;
- 按钮不在
<form>标签内部 —— 单独扔在页面任意位置,type="submit"完全无效 -
<form>没设action属性(哪怕写action=""也行),Safari 会静默拒绝提交 - JS 里写了
event.preventDefault()或onclick="return false",但没意识到它会同时拦掉表单原生提交和自定义逻辑 - 表单里有多个
type="submit",但其中一个绑了校验失败的onsubmit,整个提交就被卡住
别踩 type="button" 和没写 type 的坑
这两个看似无关紧要的细节,上线后最容易引发刷新事故或交互失效:
- 在表单里写
<button onclick="doSomething()">操作</button>(没写type)→ Chrome/Firefox/Safari 点击会提交表单 + 执行 JS,页面刷新;IE 则只执行 JS —— 行为割裂 - 想做纯 JS 操作(比如弹窗、切换字段状态),必须写
type="button",否则就是个隐藏的提交触发器 -
type="reset"会把所有字段还原成 HTML 加载时的初始值(即value="xxx"或selected属性值),JS 动态设置的值会被清空,这点常被误判为“bug”
真正麻烦的从来不是怎么写对,而是怎么让 type 在不同浏览器、不同框架、不同协作成员手里保持一致行为。显式声明、拒绝省略、验证上下文,比记住语法更重要。



















