不写type的在内默认为submit，会触发表单提交并刷新页面；必须显式声明type="button"、type="submit"或type="reset"以避免意外行为。
不写 type 的 <button></button> 为什么总在偷偷提交
只要 <button></button> 在 <form></form> 内部，又没写 type 属性，Chrome/Firefox/Safari 就一律当 type="submit" 处理——不是 bug，是规范行为。页面刷新、AJAX 中断、JS 的 onclick 看似没执行，其实是因为原生提交已先触发并跳转。
常见翻车场景：
- React/Vue 组件里渲染的按钮，父级恰好套着
<form></form>，但开发者只绑了@click或onClick，漏掉type - 表单内一个“清空搜索框”按钮，写成
<button onclick="clearInput()">清空</button>，点完直接提交空表单 - 用 SSR 模板生成按钮，模板变量未兜底
type，上线后部分页面意外刷新
type="submit" 和 type="button" 的拦截逻辑完全不同
type="submit" 触发的是表单生命周期事件 submit，不是普通 click；而 type="button" 只发 click，完全不进表单链路。想阻止提交，必须监听 form 的 submit 事件并调用 event.preventDefault()，仅给按钮加 onclick="event.preventDefault()" 没用。
关键区别：
-
type="submit"：自动收集同级<form></form>内所有带name的<input>/<select></select>/<textarea></textarea>，按method和action提交；即使action为空，也会刷新页面 -
type="button"：不收集字段、不触发submit或reset事件、不参与表单验证；纯靠 JS 控制，适合模态框开关、搜索清空、AJAX 请求等 - 非法
type值（如type="click"、type=""）在<form></form>内会被降级为submit，行为不可控
type="reset" 不是“清空”，它只认 HTML 初始值
type="reset" 只把 <input value="张三"> 恢复成 “张三”，把没写 value 的 <input> 变为空字符串。它不管 JS 动态设置的 input.value = "李四"，也不管 React 的 v-model 或 useState 更新的状态。
容易被忽略的细节：
- 它不会触发
change或input事件，依赖这些事件更新 UI 的逻辑（比如联动 disabled 状态）完全收不到通知 - 只作用于直属父
<form></form>内的控件，跨 form 无效 - 现代交互设计中极少真正需要它，“还原到加载状态”往往不符合用户预期，反而引发困惑
怎么写才不容易出错
统一原则：只要按钮不是真要提交表单，就显式写 type="button"。哪怕当前不在 <form></form> 里，也建议提前加上——避免后续重构时漏改。
实操建议：
- CSS 用属性选择器精准控制：
button[type="submit"]、button[type="button"]，权重够、兼容好、不冲突 - 框架开发中，在组件封装层做兜底：比如 Vue 的 button 组件默认
type="button"，需提交时才传type="submit" - 禁用状态统一处理：
button[type="submit"]:disabled和button[type="button"]:disabled写法一致 - 别用
<input type="button">：它不支持嵌套内容、不支持伪元素、屏幕阅读器识别弱，<button></button>全面胜出
最麻烦的从来不是记不住三者区别，而是嵌套结构下漏掉 type，或者误以为 reset 能清掉 JS 状态——它只认 HTML 初始值，别的都不管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
