不显式写 type 属性的 在表单内默认为 submit，导致意外提交刷新；IE 默认 button，其他主流浏览器及 W3C 规范均规定表单内默认 submit；必须显式声明 type 以避免线上事故。
不显式写 type 属性的 <button></button> 在表单内会默认提交，刷新页面——这是线上最常被误踩的坑。
为什么
浏览器对 <button></button> 的默认 type 值并不统一：IE 默认是 "button"，而所有其他主流浏览器（Chrome、Firefox、Safari、Edge）在 <form></form> 内部默认为 "submit"。W3C 规范也明确将 "submit" 作为表单内 <button></button> 的默认行为。
这意味着只要按钮写在 <form></form> 标签里，又没写 type，点击就会触发表单提交——哪怕你本意只是想弹个提示框或切换状态。
- 常见错误现象：
<form><button onclick="alert('hi')">点我</button></form>—— 点击后弹窗+页面刷新 - 调试线索：Network 面板看到一次空 POST / GET 请求；控制台无报错，但页面跳转或重载
- 兼容性影响：IE 行为与其他浏览器不一致，容易导致本地测试通过、上线后出问题
submit/reset/button 三者到底差在哪？
只有 "submit"、"reset"、"button" 是合法值。其他任何字符串（比如 "click"、"primary" 或空字符串 ""）都会被降级处理：在表单内当 "submit"，在表单外当 "button"。
立即学习“前端免费学习笔记（深入）”；
-
type="submit"：收集当前<form></form>内所有带name的可提交控件（<input>、<select></select>、<textarea></textarea>），按method和action提交 -
type="reset"：把每个表单控件的value设为 DOM 加载时的初始值（注意不是defaultValue，也不是 JS 后续设的值）；动态插入的字段或 JS 修改过的value不会被还原 -
type="button"：零默认行为，完全静默；必须手动绑定onclick或addEventListener('click', ...)
怎么避免 type 引发的线上事故？
核心原则：**所有 <button></button> 必须显式声明 type**，尤其在组件库、低代码平台或多人协作项目中，不能依赖“大家都懂”。
- 表单内非提交按钮，一律写
type="button"—— 即使它只负责展开下拉、校验字段或调用 API - 重置按钮必须写
type="reset"，且要确认字段初始值是否真由 HTMLvalue或selected属性定义（JS 初始化的无效） - CSS 选择器别偷懒：
button:disabled无法覆盖button[type="submit"]:disabled的权重，建议单独写规则或用类名如.btn-submit:disabled - 框架中（如 React/Vue）也要传
type属性，别以为 JSX/模板语法能绕过 HTML 原生行为
容易被忽略的细节
很多人以为 type="reset" 能清空所有字段，但它只作用于“有初始 HTML 值”的控件；用 JS 动态设置的 value、checked、selected 不受影响。另外，type 是 HTML 属性，不是 DOM 属性，所以 button.type = 'button' 在元素已挂载后修改，不会改变其默认行为——必须从渲染源头写死。
