<button>在<form>内未写type时默认为submit，会触发表单提交并刷新页面；type="button"真正静默，仅响应click；type="reset"仅还原HTML初始值，不处理JS动态状态。
button在form里没写type就提交，不是bug是规范
所有现代浏览器（Chrome、Firefox、Safari、Edge）都严格按 W3C 规范处理：<button>只要出现在<form>标签内，且未声明type属性，就等价于type="submit"。它会立刻收集所有带name的可提交控件、构造请求、刷新页面——哪怕按钮内容只是“关闭”或“取消”。
常见翻车现象包括：
- 用户在输入框按回车，页面突然跳转或白屏
-
onclick或框架的@click执行了，但紧接着页面刷新，JS 状态丢失 - Network 面板看到一次空
POST或GET请求，URL 是当前页
type="button"才是真静默，不是靠preventDefault补救
type="button"从 DOM 层面切断表单行为：不触发submit事件、不冒泡到<form>、不收集字段、不重置值。它只响应click，完全交由 JS 控制。
而给type="submit"按钮绑onclick并调e.preventDefault()，只能拦住click，拦不住后续submit流程。真正要拦，必须在<form>上监听submit并e.preventDefault()——但 JS 加载失败、漏写、写错位置，就立刻翻车。
立即学习“前端免费学习笔记（深入）”；
适用场景举例：
生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid
- 模态框开关（如
palk_ui_newsletter_error_close） - AJAX 触发器（如“加载更多”）
- 表单内辅助操作（如“清空搜索”“复制链接”）
非法type值（如type=""、type="primary"）会降级为submit
浏览器只认submit、reset、button这三个合法值。其他任何字符串，比如type="click"、type="primary"、甚至空字符串type=""，都会降级：
- 在
<form>内 → 当作type="submit"处理（意外提交） - 在
<form>外 → 当作type="button"（静默，不报错）
这种降级掩盖语义错误，尤其在 SSR、低代码平台或框架动态渲染时最难排查——比如 React 组件返回未带type的<button>，上线后才暴露。
type="reset"不是“清空”，它只还原HTML初始value
type="reset"的作用非常窄：它只把<input value="张三">这类控件的value或checked属性设回 DOM 加载时的原始值（即标签里写的值），不是 JS 设置的值，也不是defaultValue。
这意味着：
-
input.value = "新值"后点reset，仍回到 “张三” - Vue 的
v-model、React 的useState更新的值，reset完全无视 - 没写
value的<input>，初始为空，reset后就是空字符串 - 它不会触发
change或input事件，依赖这些事件更新 UI 的逻辑收不到通知
真正容易出问题的，不是记不住三者区别，而是嵌套结构下漏掉type，或者以为reset能抹掉 JS 状态。
