<button>在<form>中未写type时默认为submit，会触发表单提交并刷新页面；必须显式声明type="submit"、type="reset"或type="button"以避免意外行为。
不写 type 的 <button> 在 <form> 里默认就是 submit，点一下就提交刷新——这不是 bug，是规范行为。必须显式写清楚 type="submit"、type="reset" 或 type="button"，否则 JS 拦不住、样式难区分、排查极耗时。
为什么没写 type 就会意外提交
只要 <button> 被包在 <form> 标签内，又没声明 type，所有现代浏览器（Chrome/Firefox/Safari/Edge）都按 type="submit" 处理。它会立即触发表单的 submit 事件，走完整提交链路：收集所有带 name 的控件 → 构造请求 → 发送到 action 地址 → 页面刷新（哪怕 action 为空）。
- 你写的
onclick或addEventListener('click', ...)可能根本没机会执行 - 在 React/Vue 中更隐蔽：组件绑了
onClick，但原生submit已先完成 - 非法值如
type="click"或空字符串type=""在<form>内也会被降级为submit
type="reset" 不是“清空”，而是“还原初始 HTML 值”
type="reset" 的作用非常窄：它只把 <input>、<select>、<textarea> 的 value 或 checked 属性设回页面加载时 DOM 中的原始值（即标签里写的 value="张三"），不是 JS 设置的值，也不是 defaultValue。
-
<input value="张三">→ 用户改成“李四” → 点reset回到“张三” -
<input>（没写value）→ 初始为空 →reset后仍是空字符串 -
input.value = "新值"、v-model、useState更新的值，reset完全无视 - 它不会触发
change或input事件，依赖这些事件更新 UI 的逻辑不会响应
type="button" 是唯一真正“静默”的按钮
type="button" 不参与任何表单生命周期：不收集字段、不提交、不重置、不触发 submit 或 reset 事件。它只响应 click，完全交由 JS 控制，适合模态框开关、AJAX 请求、表单内“清空搜索”等场景。
立即学习“前端免费学习笔记（深入）”；
- 无论是否在
<form>内，点击都不会导致页面刷新或数据提交 - 必须手动绑定事件，否则点击无反应：
onclick="doSomething()"或addEventListener('click', handler) -
form.addEventListener('submit', ...)对它完全无效 - CSS 推荐用
button[type="button"]选择器统一控制样式，权重够、兼容好、不冲突
样式和事件绑定的硬性前提
光写对 type 还不够。iOS WebView 和旧版安卓浏览器里，按钮默认样式和事件行为容易失效，必须补上基础约束：
- CSS 必须加
appearance: none（含-webkit-appearance和-moz-appearance），否则圆角/阴影无法覆盖 - 务必重置
border: none和padding，不同浏览器默认内边距差异极大 - JS 绑定禁用
onclick=""内联写法，CSP 严格模式下会被拦截；优先用addEventListener - 动态插入的按钮，得在插入后立刻绑定事件，或用事件委托到稳定父容器
真正容易翻车的，不是分不清三者语义，而是在 SSR 渲染、组件封装或嵌套结构中漏掉 type 属性——这时候按钮就悄悄变成 submit 了，且很难从控制台或网络请求里一眼看出根源。
