不加 type 属性的 在 内默认为 type="submit"，点击会提交表单并刷新页面；应显式声明 type="button"、"submit" 或 "reset" 以避免误触发。

不加 type 属性的 <button></button> 在表单内会默认提交，页面刷新——这是最常被忽略、也最容易引发线上问题的行为。

为什么没写 type 却触发了表单提交？

因为 <button></button> 在表单（<form></form>）内部时，浏览器默认 type="submit"（W3C 规范及 Chrome/Firefox/Safari 等所有现代浏览器一致）；而 IE 虽然历史上默认为 "button"，但 IE 已退出主流支持，当前无需兼容。所以只要按钮在 <form></form> 里且没显式声明 type，点击就会提交并刷新页面。

• 常见错误现象：console 无报错，但表单一提交就跳转/刷新，JS 事件监听器也未触发
• 排查关键点：检查该 <button></button> 是否被包裹在 <form></form> 标签内
• 修复方式：显式写上 type="button"（纯交互）、type="submit"（真要提交）、或 type="reset"（真要清空）

type="submit" 和 type="button" 的行为差异

两者外观可能一样，但底层语义和事件流完全不同：

• type="submit"：触发 submit 事件 → 浏览器自动收集 <form></form> 内可提交字段 → 发起表单提交（GET/POST）→ 页面刷新（除非用 event.preventDefault() 阻止）
• type="button"：只触发 click 事件，不关联表单，不会收集数据，也不会刷新页面
• 注意：即使你用 JS 绑定了 submit 事件监听器，type="button" 也根本不会触发它

CSS 样式怎么区分这三类按钮？

用属性选择器直接匹配 type 值，比加 class 更精准、更少侵入性：

button[type="submit"] {
  background: #4CAF50;
  font-weight: bold;
}
button[type="reset"] {
  background: #FF9800;
  opacity: 0.85;
}
button[type="button"] {
  background: transparent;
  border: 1px solid #999;
}

• 权重合理：[type="xxx"] 权重为 10，足够覆盖标签样式，又不会压过 .class
• IE8+ 全支持，无需 polyfill
• 禁用状态统一处理：button[type="submit"]:disabled, button[type="button"]:disabled

容易被忽略的边界情况

有几处细节不注意，会在特定结构下“失效”或“误触发”：

• <button></button> 在 <form></form> 外部时，type 默认值仍是 "submit"，但它无法提交任何表单——此时行为等同于 type="button"，但语义混乱，建议仍显式声明
• type="reset" 只重置 <form></form> 内部的控件值（如 <input>、<select></select>），对 JS 动态修改的 value 或 v-model / useState 状态无效
• 使用框架（React/Vue）时，type="submit" 仍会触发原生表单提交，除非父 <form></form> 显式加了 onSubmit={e => e.preventDefault()}