不写type的button在form内默认为submit，会触发表单提交并刷新页面；type="button"才真正静默仅响应click，type="reset"仅还原html初始值而非js动态值。
不写 type 的 button 在 form 里默认会提交
只要 button 出现在 form 标签内部，又没写 type 属性，所有现代浏览器（Chrome/Firefox/Safari/Edge）都会把它当 type="submit" 处理——点一下就触发表单提交，页面刷新，哪怕 action 为空也一样。这不是 bug，是 W3C 规范行为。
常见翻车现场：<form><button onclick="showHelp()">帮助</button></form>，结果弹窗刚出来，页面就白了；React 组件绑了 onClick，但原生 submit 已经先走完。
- 修复方式极简单：非提交按钮一律显式写
type="button" - 即使按钮不在
form里，也建议统一加type，避免后续重构漏改 - SSR 模板或低代码平台生成按钮时，
type字段必须兜底，空值或未定义会被降级为submit
type="reset" 只还原 HTML 初始值，不是清空
type="reset" 的作用非常窄：它只把 input、select、textarea 的 value 或 checked 属性设回 DOM 加载时的原始值（即标签里写的 value="张三"），对 JS 动态设置的值完全无感。
-
<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', ...)对它完全无效 - 和
input[type="button"]不同，button[type="button"]支持嵌套 HTML（比如图标、svg）、aria-*属性、form属性跨表单绑定等
非法 type 值（如 type=""、type="primary"）会被降级为 submit
只有 "submit"、"reset"、"button" 是合法值。其他任何字符串（包括空字符串、"click"、"primary"）在 form 内一律被浏览器降级为 submit。
这意味着：<button type="">保存</button> 和 <button type="primary">保存</button> 在表单里效果完全一样——都会提交。
容易被忽略的细节：框架中（如 React/Vue）传 type 属性时，别以为 JSX/模板语法能绕过 HTML 原生行为；组件库若漏掉 type 渲染逻辑，线上就可能集体翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
