button默认type="submit"易致表单误提交；button支持HTML嵌套、flex对齐更优、原生表单高级属性及无障碍；input type="button"仅适用遗留系统value依赖场景。

不写type属性时，button默认会提交表单

这是最常踩的坑：在

里写<button>提交</button>，没加type="button"，点一下页面就刷新了。因为除 IE 外所有现代浏览器都按 W3C 规范把button默认设为type="submit"；而input type="button"天生就是“不提交”，根本不用管type——它只认value，没别的行为可选。

所以只要按钮不在表单里，button不写type可能没事；一旦进了<form></form>，就必须显式写type="button"，否则行为不可控。

button能嵌套HTML，input type="button"只能靠value

想加图标、换行、粗体文字或 SVG？只有button能干：<button type="button"><svg></svg>导出</button>。而input type="button"的文案完全锁死在value属性里，改内容只能el.value = "新文字"，连空格缩进都难调。

• 动态更新时，button可操作innerHTML或appendChild，图标和文字能独立控制
• input想加装饰，只能靠 CSS ::before/::after（但它不支持伪元素），实际只能用背景图或额外 DOM 节点
• 两者在 flex 布局中基线对齐方式不同：input按文本底线，button按内容盒，混排容易错位

button支持更多表单高级属性

button不是只能当普通按钮用。它原生支持form、formaction、formenctype等属性，哪怕按钮不在<form></form>标签内部，也能精准绑定并提交到指定表单：

立即学习“前端免费学习笔记（深入）”；

<form id="search-form" action="/search">
  <input name="q">
</form>

<button type="submit" form="search-form">全局搜索</button>

input type="button"没有这些能力，它的作用域被严格限制在自身节点上。

另外，button天然响应:focus-visible，无障碍体验更稳；input需要手动加aria-label补全语义，否则屏幕阅读器可能只读出“按钮”两个字。

旧版 IE 兼容性不是你该选input type="button"的理由

现在还要求支持 IE8 或更老内核的项目极少。而就算真要兼容，input type="button"在旧 IE 里也有问题：文字垂直居中失效、padding渲染异常、line-height常被忽略。反倒是button在 IE9+ 中行为统一，加上一句button { vertical-align: middle; }就能压住大部分对齐问题。

真正该用input type="button"的场景只剩一个：遗留系统无法修改 DOM 结构，且已有大量依赖value取值逻辑的 JS 代码（比如用el.value读按钮文字），改button会牵扯太多。

其他所有情况，优先写<button type="button"></button>——别省那几个字符，漏掉type属性才是真麻烦。