button 的 type 属性不写或写错会触发表单默认提交，导致页面刷新；必须显式设为 type="button" 以避免干扰表单流程，尤其在 form 内非提交按钮场景。
Button 的 type 属性不写或写错，就会触发表单提交
默认情况下，<button></button> 在表单内会被浏览器当作 type="submit" 处理——哪怕你只是想让它执行一段 JS。这是最常被忽略的隐式行为，也是“点了按钮页面却刷新了”的根本原因。
- 不写
type属性 → 浏览器自动补为type="submit" - 写了
type="submit"→ 显式触发表单提交（即使没写onsubmit或没配action） - 写了
type="button"→ 完全中立，只响应点击事件，不干扰表单流程
什么时候必须显式写 type="button"
只要按钮不是用来提交表单的，就该明确声明 type="button"。典型场景包括：模态框关闭按钮、折叠展开控件、AJAX 提交前校验触发器、纯 UI 交互按钮。
- 在
<form></form>内部使用<button></button>时，99% 的情况需要type="button" - 用
addEventListener('click', handler)绑定逻辑的按钮，若没设type，event.preventDefault()是补救手段，但不如源头控制可靠 - 框架（如 React/Vue）中生成的
<button></button>也受此规则约束，JSX 模板里漏写type="button"同样会出问题
type="reset" 和 type="submit" 的真实作用边界
这两个值不是“可选装饰”，而是有明确语义和副作用的。误用会直接破坏用户输入或跳过验证逻辑。
-
type="reset"会无条件把所有<input>、<select></select>、<textarea></textarea>重置为初始值（不是空值，是value属性或defaultValue的值） -
type="submit"触发的是原生表单提交流程：先触发submit事件，再按method和action发起请求；若没阻止，默认导致页面跳转或刷新 - 即使你监听了
submit事件并调用了event.preventDefault()，仍建议把提交按钮明确设为type="submit"——语义正确，且便于无障碍访问（AT 工具能识别其用途）
容易被忽略的兼容性与测试盲区
某些旧版浏览器（如 IE8–10）对 type 属性缺失的处理更激进；而现代框架在 SSR 渲染时若服务端未输出 type，客户端 hydration 可能产生不一致行为。
- 检查 HTML 源码，确认
<button></button>标签是否真有type="button"属性，而不是仅靠 JS 动态添加 - 用 DevTools 的 Elements 面板查看渲染后的 DOM，注意是否有框架抹除或覆盖
type属性的情况 - 在表单内混用
<input type="button">和<button></button>时，前者默认就是type="button"，后者不是——别凭直觉认为它们行为一致
type="button"，不依赖默认、不靠 JS 补救、不赌浏览器行为一致**。这个属性小，但漏掉它，后面所有 JS 逻辑都可能在刷新页面时失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
