button在form内未写type时默认为submit，这是w3c规范要求，所有现代浏览器均严格遵循；必须显式声明type="button"才能阻止表单提交行为。
不写type时button在form内默认是submit，不是兼容问题而是规范行为
所有现代浏览器（Chrome、Firefox、Safari、Edge）和 W3C 规范都明确定义：<button></button> 出现在 <form></form> 内部且未声明 type 属性时，**必须按 type="submit" 处理**。这不是“IE 和其他浏览器不一致”，而是 IE8+ 也已对齐该规范——旧版 IE（≤7）才默认 type="button"，但这类环境早已退出主流支持范围。
所谓“兼容性差异”其实是误判：你本地测的是 Chrome，上线后用户用的是 Safari 或某安卓 WebView，结果都触发了提交，不是因为它们行为不同，而是因为它们都严格遵守同一规则。翻车点从来不是浏览器分歧，而是没写 type。
- 只要按钮在
<form></form>标签内，又没写type，就等同于写了type="submit" - 哪怕按钮上写着“取消”“重置”“复制链接”，点击照样发请求、刷新页面
- React/Vue 模板里写
<button></button>或<button onclick="{handleClose}"></button>，如果最终渲染进<form></form>，DOM 中就是type="submit"
type="button" 是唯一真正隔离表单行为的合法值
type="button" 不是“可选优化”，它是唯一从 DOM 层面切断表单生命周期的合法值：它不触发 submit 事件、不冒泡到 <form></form>、不收集字段、不参与回车键提交逻辑（Enter 键聚焦在输入框时不会激活它），也不受 form.reset() 影响。
而 type="submit" 的行为根本不在 click 链路上——它走的是表单 submit 流程。你在按钮上绑 onclick="event.preventDefault()" 或 @click.prevent，只能拦住 click，拦不住后续 submit。真要拦截，必须监听 <form></form> 的 submit 事件并调 event.preventDefault()，但这有前提：JS 已加载、事件已绑定、没被 CSP 拦截、没写错作用域。
- 模态框关闭按钮、Tab 切换、AJAX 触发器、清空搜索框，一律用
type="button" - 动态创建按钮时（如
document.createElement('button')），必须立刻设button.type = 'button' - SSR 模板、低代码平台生成的按钮，要检查是否漏了
type字段；空字符串type=""或非法值如type="primary"会降级为type="submit"（在<form></form>内）
用 DevTools 快速验证 button 实际 type 值
别靠“我记得我写了”或“本地没刷新”，直接看渲染后的 DOM 行为。打开浏览器开发者工具，选中按钮元素，在 Elements 面板里观察其属性——type 属性不会自动补全显示，但你可以右键 → “Edit as HTML”，手动加个 type="button" 看是否立刻停止刷新；或者切换到 Console，执行 document.querySelector('button').type，返回值就是当前生效的 type。
更关键的是验证键盘行为：把焦点移到表单内任意 <input>，按 Enter 键。如果页面刷新或发请求，说明当前第一个可提交按钮（通常是第一个 type="submit"）被激活了——这时候再回去查 DOM，八成是某个按钮漏写了 type。
- 移动端 iOS Safari 对隐式
submit的 focus/blur 处理有微小延迟，显式声明type能规避不确定性 - 某些 UI 库（如 Ant Design）封装的
Button组件默认设为type="button"，但手写原生<button></button>时容易忽略这点，造成行为割裂 - 用
form.addEventListener('submit', e => { console.log('submit fired'); })可确认是否真被当成了提交按钮
reset 不是清空，submit 不是 click，type 是语义层硬约束
type 属性不是样式开关，也不是 JS 控制的软开关，它是 HTML 语义层的硬约束。浏览器根据它决定是否进入表单提交流程、是否响应 Enter 键、是否参与 form.elements 集合、是否被 form.reset() 影响。写错或不写，后果不是“样式不对”，而是“业务逻辑被绕过”：比如用户点了“取消”，结果订单被提交；点了“重置”，结果只还原了 HTML 初始值，JS 动态填的地址、电话全丢了。
最容易被忽略的是：这个约束必须**显式写出**，不能靠框架兜底、不能靠团队默契、不能靠“反正我没在 form 里”。重构时把一个 div 换成 form，漏改 button 的 type，事故就来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
