不写 type 时浏览器统一按 type="submit" 处理；表单内未声明 type 的 button 点击会触发表单提交，导致意外刷新或请求；非提交按钮必须显式写 type="button"。
button 元素的 type 属性不写时，浏览器到底按什么处理
不写 type 时，所有主流浏览器（Chrome、Firefox、Safari、Edge）都按 type="submit" 处理——这是 HTML 规范明确规定的，不是兼容性差异，而是统一行为。但问题常出在「你以为它没提交，其实它正往服务器发请求」。
为什么表单里没写 type 的 button 会意外触发表单提交
因为 <button></button> 在表单内默认就是 submit，哪怕内容只是「取消」或「展开详情」。只要它没显式声明 type="button"，点击就会触发 form 的 submit 事件。
- 常见错误现象：
Uncaught (in promise) TypeError: Cannot read properties of null类似报错，实际是表单跳转/刷新导致 JS 上下文丢失 - 使用场景：模态框关闭按钮、搜索条件重置按钮、纯前端交互按钮
- 正确写法必须显式加
type="button"，哪怕你用event.preventDefault()拦截，也建议优先从语义上堵住源头
type="reset" 和 type="submit" 的隐式行为差异
三者中只有 submit 是默认值；reset 和 button 都必须显式声明才生效。别指望不写 type 能得到「无操作」效果。
-
type="reset"会把表单控件恢复到value初始属性值（不是 placeholder，也不是 JS 动态设的值） -
type="submit"触发form.submit()，走原生提交流程（包括submit事件冒泡、表单验证、action跳转） - 性能影响：默认
submit行为本身极轻量，但后续整页刷新或接口请求才是开销主体
React/Vue 等框架里仍需手动写 type="button"
框架不会帮你补这个属性。JSX 中写 <button onclick="{handleClick}">点我</button>，DOM 渲染出来仍是 type="submit"（如果在 form 内）。Vue 模板同理。
- 容易踩的坑：用
@click.prevent或onClick={(e) => { e.preventDefault(); ... }}拦截，但忘了 DOM 层面仍存在 submit 语义，可能干扰表单验证逻辑或屏幕阅读器 - 推荐做法：所有非提交意图的
button，一律显式写type="button"，和框架无关 - 检查方法：打开 DevTools，选中按钮元素，看 Attributes 里有没有
type；没有就等于submit
最常被忽略的是「按钮是否在 form 标签内部」——哪怕只是祖辈级嵌套，也会继承默认行为。别依赖 JS 拦截兜底，语义先行才是稳定解法。
