没写type的<button>在<form>内默认为submit，会触发表单提交并刷新页面；必须显式声明type="button"、"submit"或"reset"以避免误触发。
没写 type 的 <button> 在表单里默认就是 submit，点一下就刷新页面——这是最常被忽略、也最难排查的坑。
为什么
浏览器规范明确：只要 <button> 出现在 <form> 内部，且未声明 type 属性，一律按 type="submit" 处理。哪怕你只写了 <button>取消</button>，点击也会触发表单提交。
典型现象包括：
- JS 的
click事件根本没执行（因为原生submit事件已先触发） - 控制台无报错，页面却突然跳转或白屏
- 在 React/Vue 中更隐蔽：组件绑了
onClick，但表单已提前提交
修复方式极简单：所有非提交按钮，统一显式写 <button type="button">。哪怕当前不在 <form> 里，也建议提前加——避免后续重构漏改。
立即学习“前端免费学习笔记（深入）”；
type="submit" 和 type="reset" 的真实行为边界
它们不是普通点击事件，而是表单专属语义动作，行为由 HTML 表单机制硬性约束：
-
type="submit"触发的是submit事件，不是click；仅监听click拦不住提交。想拦截，必须在<form>上监听submit并调用event.preventDefault() -
type="reset"只还原 HTML 初始值（比如<input value="default">会变回"default"），不会还原 JS 动态设置的input.value = "new" -
reset不触发change或input事件，依赖这些事件更新 UI 的逻辑完全收不到通知
现代项目中，<button type="button"> 是默认首选；<input type="button"> 几乎没有合理使用场景：
-
<button>支持嵌套任意 HTML：<button type="button"><svg></svg>导出</button>；<input>只能靠value显示纯文本 -
<button>支持::before/::after伪元素，加图标/状态标记无需额外 DOM；<input>不支持伪元素 -
<button>在屏幕阅读器中识别更准，尤其含aria-label或图文组合时 -
<input type="button">唯一现实用途：维护仍需兼容 IE8 或更老版本的遗留系统，且无法重构表单结构
CSS 和 JS 绑定的不可妥协前提
样式失效、事件不响应，往往不是逻辑问题，而是基础配置没做全：
- CSS 必须加
appearance: none;（含-webkit-appearance和-moz-appearance），否则 iOS 按钮圆角/阴影无法覆盖 - 务必重置
border: none;和padding，不同浏览器默认内边距差异极大 - JS 必须用
addEventListener('click', handler)，禁用onclick=""内联写法——CSP 严格模式下会被拦截 - 动态插入的按钮，得在插入后立刻绑定，或用事件委托到稳定父容器上
真正容易被忽略的，是那个没写的 type 属性——它不报错、不警告，只在某个表单里悄悄刷新页面，等你花半小时查 JS 逻辑时才意识到，问题出在 HTML 标签本身。
