未声明 type 的 在表单内默认为 type="submit"，会触发表单提交；应统一显式写 type="button"，优先用 而非 。
不写 type 的 <button></button> 在表单里会默认提交，这是最常踩的坑；优先用 <button type="button"></button>，别用 <input type="button">。
为什么
浏览器对未声明 type 的 <button></button> 有默认行为：在 <form></form> 内部时，一律当 type="submit" 处理。哪怕你只写了 <button>取消</button>，点一下也会触发表单提交、页面刷新、后端收到空请求。
- 常见现象：JS 的
click事件没触发、控制台无报错、页面突然跳转或白屏 - React/Vue 中尤其隐蔽：组件绑了
onClick，但原生submit事件已先走完 - 修复方式很简单：只要按钮不是真要提交，就显式写
<button type="button"></button> - 哪怕按钮不在
<form></form>里，也建议统一加type——避免后续重构时漏改
<button></button> 是语义更准、扩展性更强的选择；<input type="button"> 只剩兼容老系统的理由才用。
-
<button></button>支持嵌套 HTML，比如<button type="button"><svg></svg> 导出</button>；<input>只能靠value显示纯文本 - 两者都支持
disabled、name、id，JS 绑定方式完全一样 -
<input type="button">唯一优势是 IE8 及更早版本兼容——现在基本不用考虑 - 如果项目用 SSR 或模板引擎生成按钮，更要检查是否漏掉了
type属性
type="submit" 和 type="reset" 的真实行为
type="submit" 触发的是 submit 事件，不是 click；type="reset" 只还原 HTML 初始值，和 JS 状态无关。
-
type="submit"必须放在<form></form>内才有效；即使没写action，点击仍会刷新页面 - 想拦截提交，必须监听
form的submit事件并调用event.preventDefault()，仅绑click拦不住 -
type="reset"只把<input value="xxx">恢复成"xxx"，不会还原 JS 设置的input.value = "new" - 它不触发
change或input事件，依赖这些事件更新 UI 的逻辑完全收不到通知
CSS 和 JS 绑定的硬性前提
样式重置和事件绑定都有不可妥协的条件，否则在 iOS WebView 或旧版安卓浏览器里直接失效。
- CSS 必须加
appearance: none;（含-webkit-appearance和-moz-appearance），否则 iOS 按钮圆角/阴影无法覆盖 - 务必重置
border: none;和padding，不同浏览器默认内边距差异极大 - JS 必须用
addEventListener('click', handler)，禁用onclick=""内联写法——CSP 严格模式下会被拦截 - 动态插入的按钮，得在插入后立刻绑定，或用事件委托到稳定父容器上
真正容易被忽略的，是 SSR 渲染时漏掉 type 属性，或者在组件库封装中把 type 当可选参数默认为空——这时候按钮就悄悄变成 submit 了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
