优先使用 <button type="button">，因其支持嵌套内容、样式可控、可访问性好；仅IE8及更早版本需用 <input type="button">；漏写 type 会导致意外提交。
优先用 <button>，但必须显式写 type="button"；只有在需要兼容 IE8 及更早版本时，才考虑 <input type="button">。
不写 type 属性时 <button> 会意外提交表单
这是最常踩的坑：W3C 规范里 <button> 默认 type="submit"，点一下就触发表单提交、页面刷新；IE 系统反而默认 type="button"，行为不一致。一旦漏写 type，开发时可能没发现，上线后用户点按钮就跳转或清空表单。
- 安全写法永远是：
<button type="button">取消</button> - 如果真要提交，明确写成：
<button type="submit">保存</button> -
<input type="button">没这个问题——它永远不提交，type是必填属性，不存在“漏写”情况
<button> 支持嵌套内容，<input type="button"> 只能靠 value
想加图标、换行、粗体、SVG 或动态插入 HTML？<button> 直接操作 innerHTML 或 appendChild 就行；<input> 只能改 value 字符串，连空格都难对齐，更别说图标了。
- 合法：
<button type="button"><svg></svg> 刷新</button> - 非法（会被忽略）：
<input type="button" value="<svg></svg> 刷新"> - 动态更新时：
btn.innerHTML = '已加载'有效；inp.value = '已加载'只能换文字，样式/结构全丢
<button> 样式和可访问性更可控
<button> 原生支持 ::before/::after、line-height 垂直居中稳定、padding 行为一致；<input type="button"> 在旧版 IE 中文字上下偏移、line-height 失效、伪元素不支持，屏幕阅读器也更难识别图文组合。
立即学习“前端免费学习笔记（深入）”；
- 加箭头图标只需：
button::after { content: "→"; margin-left: 4px; } -
<input>要实现同样效果，得额外加 DOM 节点或用背景图，维护成本高 - 含
aria-label和图标时，<button>的语义输出更准确，WCAG 合规性更好
表单序列化时两者都不提交，但 <button> 的 name/value 有兼容性风险
只要 type 不是 submit 或 image，<button type="button"> 和 <input type="button"> 都不会出现在 FormData 或 jQuery .serialize() 结果里——这点一致。但如果你给 <button> 加了 name 和 value，IE 会把标签内文本当值提交，Chrome 则用 value 属性，行为分裂。
- 避免踩坑：不用
<button>的name/value传参，改用data-属性或 JS 控制 - 需要提交数据的按钮，统一用
<button type="submit">或<input type="submit">，别混用type="button"+name - 旧项目若还在用 IE8，
<input type="button">是唯一稳妥选择，但 2026 年基本可忽略
真正麻烦的不是选哪个标签，而是忘记显式声明 type —— 这个细节在多人协作或快速迭代时最容易被跳过，一出问题就是线上表单异常提交。
