button在form里不写type就提交，不是bug是规范；所有现代浏览器均按w3c规范将表单内无type的button视为submit，触发表单提交并刷新页面，而type="button"才是唯一真正静默、仅响应click的合法值。
button在form里不写type就提交，不是bug是规范
所有现代浏览器（Chrome、Firefox、Safari、Edge）都严格按 W3C 规范处理：只要 <button></button> 出现在 <form></form> 标签内，且没写 type 属性，就当 type="submit"。它会立刻收集所有带 name 的字段、发请求、刷新页面——哪怕你只写了 <button>关闭</button>。
常见现象包括：
- JS 的
onclick或框架的@click执行了，但紧接着页面白屏或跳转 - Network 面板看到一次空 POST/GET，URL 是当前页
- React/Vue 中状态更新被中断，控制台无报错，只丢上下文
type="button"才是真静默，不是“加个preventDefault就行”
type="button" 从 DOM 层面切断表单行为：不触发 submit、不冒泡到 form、不收集字段、不重置值。它只响应 click，完全交由 JS 控制。
而给 type="submit" 按钮绑 onclick 并调 e.preventDefault()，只能拦住 click，拦不住后续 submit 流程。真正要拦，必须在 <form></form> 上监听 submit 并 e.preventDefault()——但 JS 加载失败、漏写、写错位置，就立刻翻车。
type="button" 的适用场景：
- 模态框开关（如关闭错误提示框
palk_ui_newsletter_error_close） - AJAX 触发器（如“加载更多”）
- 表单内辅助操作（如“清空搜索”“复制链接”）
非法type值（如type=""、type="primary"）会降级为submit
浏览器只认 submit、reset、button 这三个合法值。其他任何字符串，比如 type="click"、type="primary"、甚至空字符串 type=""，都会降级：
- 在
<form></form>内 → 当作type="submit"处理（意外提交） - 在
<form></form>外 → 当作type="button"（静默，不报错）
这种降级掩盖语义错误，尤其在 SSR、低代码平台或框架动态渲染时最难排查——比如 React 组件返回未带 type 的 <button></button>，上线后才暴露。
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 的逻辑收不到通知
真正容易被忽略的是：这个坑常在开发阶段被掩盖——本地用 Chrome 测试没问题，用户用 Firefox；独立页面测试正常，上线后按钮嵌在复杂表单里；或者框架动态插入未带 type 的按钮，JS 还没执行完，submit 就已发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
