关键在type属性——不写默认为submit；普通按钮必须显式设type="button"，否则会触发表单提交；submit支持回车和富内容，reset仅还原html初始值且不触发change事件。
关键在 type 属性——不写它，默认就是提交按钮；要当普通按钮用，必须显式写 type="button"。
type 属性决定按钮本质行为
HTML 中 <button></button> 的 type 不是可选项，而是行为开关：
-
type="submit"：触发表单提交（必须在<form></form>内才有效） -
type="reset"：将表单控件还原为页面加载时的初始值 -
type="button"：无任何默认行为，纯靠 JavaScript 驱动
没写 type 时，浏览器一律按 submit 处理——哪怕按钮只写着“取消”或绑了 onclick，点一下照样提交表单、刷新页面。
为什么普通按钮一定要写 type="button"
省略 type 看似省事，实际埋下三类典型问题：
- 表单内点击后静默提交，控制台无报错，网络面板却多出一次请求
- 同时绑定
onclick和表单提交，JS 逻辑执行了，但原生提交也走了，造成重复操作（如两次下单） - 在 React/Vue 等框架中，组件级 click 事件可能被原生 submit 事件抢在前面执行，导致状态更新异常
只要按钮不负责提交，就该从第一行代码开始写清楚：<button type="button">导出</button>。
提交按钮要支持回车和语义清晰
用户在任意输入框按回车，浏览器只会触发表单中 DOM 顺序第一个 type="submit" 的按钮。这意味着：
- 登录、搜索等关键操作，应确保对应按钮是第一个
type="submit" - 若用
type="button"实现提交，需额外监听keydown判断 Enter 键，并手动调用form.submit()或发 AJAX -
<button type="submit"></button>支持嵌套图标、加粗文字、换行等富内容，<input type="submit">只能靠value显示纯文本
重置按钮也有明确边界
type="reset" 不是“撤销上一次填写”，而是还原 HTML 初始状态：
- 还原的是
<input value="张三">这类写死在标签里的值，不是 JS 动态赋的input.value = "李四" - 不会触发
change或input事件，依赖这些事件更新 UI 的逻辑会失效 - 同样必须放在
<form></form>内，否则点击无反应
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
