button默认type为submit，不声明易致表单意外提交；input type="button"天生不提交。button支持嵌套html、伪元素、无障碍属性及表单外绑定，input仅限value文本且限制多。

button默认type是submit，不写type就踩坑

在

里写提交却不加type属性，点一下页面就刷新——这不是bug，是W3C规范行为。除IE外所有现代浏览器都把button默认设为type="submit"；而input type="button"天生就是“不提交”，type属性根本不用写。

• 只要按钮进了<form></form>，button就必须显式声明type="button"或type="submit"
• 哪怕按钮当前不在表单里，也建议提前写好type="button"，避免后续DOM挪动后行为突变
• 非法type值（比如type="click"或空字符串）会被浏览器降级为submit，务必避免

button能嵌套HTML，input只能靠value

button里面可以塞<svg></svg>、<strong></strong>、换行符甚至图标字体；input type="button"的文案完全锁死在value属性里，连空格缩进都难调，更别说动态更新图标和文字了。

html-deploy

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

下载

• 改button文字用el.textContent或el.innerHTML，改input只能用el.value
• button支持::before/::after伪元素，input不支持
• 移动端点击热区小？button默认padding和min-height偏低，iOS Safari下低于44px识别率明显下降，必须手动重置

form属性和无障碍支持差异大

button原生支持form、formaction、formenctype等高级属性，哪怕按钮不在<form></form>标签内部，也能精准绑定并提交到指定表单；input type="button"的作用域被严格限制在自身节点上。

• button天然响应:focus-visible，屏幕阅读器读出的是完整内容（如“导出SVG”）；input需手动加aria-label，否则只读“按钮”两个字
• button disabled会天然禁用所有子节点，input disabled只禁用自身
• 旧IE兼容不是选input type="button"的理由——IE9+中button行为更统一，加一句button { vertical-align: middle; }就能解决对齐问题

真正该用input type="button"的场景只剩一个

遗留系统无法修改DOM结构，且已有大量JS代码依赖el.value读取按钮文字（比如if (btn.value === '删除') {...}），改用button会牵扯太多逻辑。

• 除此之外，所有新项目、所有需要图标/换行/语义化/无障碍的场景，button都是默认首选
• input type="button"在旧IE里也有渲染问题：文字垂直居中失效、padding异常、line-height常被忽略
• 别被“写法不同而已”误导——两者在可访问性、移动端点击识别、表单联动上的差距，上线后才暴露

实际开发中，最易被忽略的是button在表单内外的行为切换逻辑，以及input type="button"对伪元素和子节点的彻底不支持——这些不是样式问题，是DOM能力边界。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！