在内未声明type属性时默认为submit，导致意外提交；应显式设置type="button"/"submit"/"reset"，并注意事件流与重置行为差异。
不写 type 的 <button></button> 在表单里会偷偷提交
只要 <button></button> 被包在 <form></form> 里，又没写 type 属性，浏览器就当它是 type="submit"——点一下，表单立刻提交、页面刷新，JS 事件监听器都来不及触发。
常见错误现象：
- 点击按钮后页面跳转或白屏，控制台没报错
- 绑了
click事件但完全没执行 - 用 React/Vue 写的按钮，
onSubmit没拦住，还是发了原生请求
排查和修复很简单：
- 检查该
<button></button>是否在<form></form>标签内部 - 显式加上
type="button"（纯交互）、type="submit"（真要提交）、或type="reset"（真要清空） - 别依赖“反正我写了 JS 阻止默认行为”，先让语义正确
type="submit" 和 type="button" 的事件流完全不同
type="submit" 触发的是 submit 事件，它会走完整表单流程：收集 name 字段 → 构造请求 → 发送到 action 地址 → 页面刷新（除非被 event.preventDefault() 拦住）。
type="button" 只触发 click，不碰表单、不收集数据、不刷新页面，纯粹交给你用 JS 控制。
关键区别：
-
type="submit"的click事件会在submit之前触发，但拦不住默认提交；必须在submit事件里preventDefault() -
type="button"完全不触发submit，所以绑submit监听器也没用 - 即使表单没有
action，type="submit"点击仍会刷新页面（这是规范行为）
type="reset" 只重置 HTML 原生值，不碰 JS 状态
type="reset" 的作用很窄：它只把 <input>、<select></select>、<textarea></textarea> 这些元素的 value 或 checked 属性恢复成它们的初始 HTML 值（即写在标签里的 value="xxx" 或 checked 属性），不是当前 JS 设置的值。
这意味着：
- 用
input.value = "new"或 Vue 的v-model、React 的useState改的值，reset按钮完全不管 - 如果初始 HTML 没写
value，那重置后就是空字符串 - 它不会触发
change或input事件，所以依赖这些事件更新 UI 的逻辑不会响应
CSS 样式建议直接用 [type="xxx"] 选择器
比起给每个按钮加 class，用属性选择器更准、更轻量、不易冲突：
-
button[type="submit"]权重是 10，足够覆盖button标签样式，又不会压过.btn-primary这类 class - 不需要额外 class 就能区分三类按钮，比如：
button[type="reset"] { opacity: 0.85; } - 禁用状态统一写：
button:disabled或更精确的button[type="submit"]:disabled - 注意：IE8+ 全支持，不用 polyfill
真正容易被忽略的，是嵌套结构下 type 的隐式继承问题——比如自定义组件里透传 type，或 SSR 渲染时漏掉属性。语义一旦出错，行为就不可控，而且很难 debug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
