不写 type 时 button 默认是 submit，这是 html 规范强制定义的，表单内未声明 type 的 button 均按 type="submit" 处理，会触发表单提交；务必显式声明 type="button"、type="submit" 或 type="reset" 以避免意外行为。
不写 type 时 button 默认是 submit
在表单（<form></form>）内，只要没显式声明 type 属性，<button></button> 就会按 type="submit" 处理——不是浏览器差异，是 HTML 规范强制定义的。这意味着：点击它会触发表单提交，哪怕按钮上写着“取消”或“重置”。常见错误现象就是点完按钮页面刷新、跳转，或后端收到意外 POST 请求。
实操建议：
- 所有
<button></button>都显式写type，别依赖默认值 - 表单内需要触发 JS 逻辑（比如弹窗、校验）的按钮，必须写
type="button" - 要提交表单的按钮，明确写
type="submit"；要重置的写type="reset" - 用浏览器开发者工具检查元素，看渲染后的
type值是否符合预期（注意：DOM 中不会自动补全属性，得靠规范理解其行为）
type="button" 是最安全的兜底选择
当你不确定按钮用途，或它本就不属于表单提交流程（比如模态框关闭按钮、Tab 切换、复制文本），一律用 type="button"。它完全不触发表单行为，也不重置任何字段，只响应 click 事件。
容易踩的坑：
- 把
<button onclick="doSomething()"></button>放在<form></form>里却不写type，结果doSomething()执行完表单仍被提交 - 用
event.preventDefault()拦截 submit，但忘了加在click外层（应监听submit事件更稳妥），导致拦截失败或重复绑定 - 某些 UI 组件库（如 Ant Design、Element Plus）封装的
Button组件默认设为type="button"，但手写原生<button></button>时容易忽略这点，造成行为不一致
不同 type 对表单提交和键盘交互的影响
type="submit" 和 type="reset" 不仅影响鼠标点击，还决定回车键（Enter）能否触发对应动作。例如：聚焦在表单内任意可编辑字段时按 Enter，浏览器会自动点击第一个 type="submit" 的按钮；而 type="button" 完全不参与这个机制。
性能与兼容性提示：
- 所有现代浏览器对这三种
type的支持完全一致，无需 polyfill - 没有性能差异，但语义错误可能引发调试成本：比如误提交导致接口被刷、日志污染、甚至数据库异常写入
- 移动端 iOS Safari 在某些混合表单场景下，对隐式
submit的 focus/blur 处理略有延迟，显式声明能规避不确定性
用 DevTools 快速验证 button 的实际行为
别猜，直接看。打开 Chrome 或 Edge 的开发者工具，选中按钮元素，在右侧面板的 “Properties” 标签页里展开 HTMLButtonElement，找到 type 字段——它显示的是运行时解析值，即规范定义的默认值，不是 HTML 源码里有没有写。
快速验证步骤：
- 临时删掉按钮的
type属性，刷新页面 - 在 Elements 面板中右键该
<button></button>→ “Break on” → “attribute modifications”，再点按钮，观察是否触发了submit相关事件监听器 - 在 Console 中执行
document.querySelector('button').type，确认返回值是"submit"还是"button"
真正麻烦的从来不是写不写 type，而是团队里有人写了、有人没写，线上环境混着用，问题只在特定表单路径下暴露。统一规范比事后 debug 省十倍力气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
