button在form内未声明type时默认为submit，会触发表单提交并刷新页面；w3c规范明确此行为，ie例外但已淘汰；必须显式写type="button"避免意外提交。
button默认type="submit"会误提交表单
不写type属性的<button></button>在
- 哪怕按钮当前不在
<form></form>里，也建议统一写type="button"——DOM结构未来可能挪动，行为不该依赖位置 -
<input type="button">天生不会提交，type属性可省略，但这也意味着它永远无法承担submit或reset语义 - 别用
event.preventDefault()补救，默认行为失控说明设计已出问题
button能嵌套HTML，input只能靠value
<button></button>是容器元素，内部可放<svg></svg>、<strong></strong>、换行符甚至<span></span>；<input type="button">的文案完全锁死在value属性里，连空格缩进都难调。
比如加一个刷新图标：
<button type="button"> <svg width="16" height="16"><use href="#icon-refresh"></use></svg> 刷新 </button>
而<input>只能这样：
<input type="button" value="刷新">
- 动态更新时，
button可直接改innerHTML或插入节点；input只能改value，图标永远加不进去 -
input不支持::before/::after伪元素，想加箭头得额外DOM或背景图 - 旧IE中
input type="button"的padding和line-height渲染异常，反而button加一句vertical-align: middle更稳
button支持form属性绑定外部表单
<button></button>原生支持form、formaction、formenctype等属性，哪怕按钮不在<form></form>标签内，也能精准控制提交目标：
<input type="button">没有这些能力，它的作用域被严格限制在自身节点上。
-
form属性只对type="submit"或type="image"生效，type="button"设了也无效 - 表单序列化（如
FormData）中，两者都不参与提交——前提是type不是submit或image - 无障碍方面，
button天然响应:focus-visible，input需手动加aria-label补语义
移动端点击区域小是样式问题，不是标签缺陷
所谓“button在手机上点不中”，根本不是标签本身的问题，而是浏览器默认padding和min-height太低。iOS Safari 对小于44px的点击区域识别率明显下降。
- 统一重置：
button, input[type="button"] { padding: 0.5em 1em; min-height: 44px; } -
button和input在flex布局中基线对齐方式不同：input按文本底线，button按内容盒，混排容易错位 - 真正该用
<input type="button">的场景只剩一个：遗留系统无法改DOM，且已有大量JS依赖el.value读取按钮文字
现代项目里，<button></button>是事实标准；纠结选哪个，本质是在回避明确指定type和重置基础样式这两件事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
