<button>在<form>内未声明type时默认为submit，导致意外提交和页面刷新；应统一显式声明type="button"或type="submit"以避免隐蔽bug。
不写 type 的 <button> 在 <form> 里默认是 submit，不是 button——这是线上最常导致页面白屏、请求空发、JS 事件“没执行”的隐形杀手。
为什么点一下按钮就刷新页面？
浏览器对 <button> 的 type 默认值有明确但易被忽略的上下文规则：只要它在 <form> 标签内部，且未显式声明 type，所有现代浏览器（Chrome、Firefox、Safari、Edge）和 W3C 规范都按 submit 处理。IE 是个例外（旧版默认 button），但这反而让问题更隐蔽——本地 IE 测试正常，上线 Chrome 就炸。
常见错误现象：
-
<form><button onclick="doSomething()">保存</button></form>——doSomething()可能执行了，但紧接着页面刷新，控制台看不到报错 - Network 面板出现一次空
POST或GET请求，URL 是当前页或action指向地址 - React/Vue 组件中绑了
@click或onClick，但表单提交先触发，JS 状态更新被中断
type="submit" 和 type="button" 的行为差异远不止“提不提交”
type="submit" 触发的是原生 submit 事件，不是 click；而 type="button" 是彻底静默的，只响应你手动绑定的事件。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 想拦截表单提交？必须监听
<form>的submit事件并调用event.preventDefault()，仅给按钮绑click拦不住 -
type="reset"不是“清空表单”，它只把每个字段的value设为 HTML 初始值（即<input value="abc">中的"abc"），JS 后续改过的值、动态插入的字段全不还原 - 任何非法
type值（如"primary"、""、"click"）都会降级：在<form>内当submit，在表单外当button
应该统一写 type="button"，哪怕按钮根本不在 form 里
这不是过度防御，而是预防重构风险。今天按钮在 div 里，明天抽离成组件、嵌入别人写的表单，漏掉 type 就等于埋雷。
- 优先用
<button type="button">，别用<input type="button">：前者支持内嵌 HTML（图标、文字、Badge），后者只能靠value显示纯文本 - SSR、模板引擎（如 EJS、Nunjucks）或低代码平台生成按钮时，更要检查是否自动注入了
type—— 很多模板默认不加 - 用 ESLint 可配规则
jsx-a11y/no-autofocus类似思路，但目前没有主流插件强制校验button[type]，得靠人工或自定义规则
React/Vue 中的 button 更容易被忽略
框架层会帮你绑定事件，但不会帮你修正原生语义。一个 <button onClick={handleCancel}>取消</button> 如果没写 type，又恰好在 <form> 里，那 handleCancel 执行完，表单照样提交。
- Vue 模板中，
@click.prevent只阻止 click 传播，不阻止 submit 行为；真正要防提交，得写@click.prevent.stop或直接加type="button" - React 中同理：
onClick是合成事件，submit是原生事件，两者不互斥；不要依赖event.stopPropagation()来防刷新 - 如果按钮真要提交，也建议显式写
type="submit"，而不是靠默认值——可读性、可维护性、调试线索都更清晰
最危险的不是出错，而是出错后看不出错在哪：没报错、没警告、Network 里只有一次“合理”的请求，JS 逻辑却断在半路。这个坑不靠经验很难绕开，写 button 的第一反应就该是敲出 type="button"。
