按钮行为由type属性决定：type="submit"触发表单提交并刷新页面；type="reset"恢复html初始值；type="button"仅响应click事件，需手动绑定js逻辑。
关键在 <button></button> 标签的 type 属性，它直接决定按钮行为。不写 type 时，只要按钮在 <form></form> 里，浏览器一律当提交按钮处理——点一下就发请求、页面刷新，JS 都来不及执行。
type="submit"：真正触发表单提交
这个按钮会收集同级 <form></form> 内所有带 name 的可提交控件（比如 <input name="user">），按 method 和 action 发起请求。即使 action 为空，也会刷新页面。
- 必须放在
<form></form>标签内部才有效 - 点击后触发的是
submit事件，不是click；仅在按钮上加onclick="event.preventDefault()"拦不住提交 - 要阻止提交，得监听
form的submit事件，并在里面调用event.preventDefault() - 示例：
<button type="submit">确认下单</button>
type="reset"：只还原 HTML 初始值，不是清空
它不会发请求，也不会清空字段，只是把表单控件恢复成页面加载时 DOM 中的原始状态——也就是你在 HTML 标签里写的 value="张三" 或 checked 这类属性值。
- 同样必须在
<form></form>内才生效 - 对 JS 动态设置的值无效（比如
input.value = "李四"）、Vue 的v-model、React 的useState状态完全没反应 - 不会触发
change或input事件，依赖这些事件更新 UI 的逻辑不会同步 - 示例：
<button type="reset">恢复默认</button>
type="button"：纯前端交互专用
这是唯一不参与表单生命周期的按钮。它不收集数据、不提交、不重置、不触发任何表单事件，只响应 click，全靠 JavaScript 控制。
- 无论是否在
<form></form>内，点击都不会导致刷新或提交 - 必须手动绑定事件，否则点击无反应：
onclick="doSomething()"或addEventListener('click', handler) - 适合模态框开关、“清空搜索框”、AJAX 请求等场景
- 示例：
<button type="button" onclick="clearSearch()">清空</button>
非法 type 值（如 type="click"、type=""）在表单内会被浏览器降级为 submit，行为不可控。所以别猜、别省略，每个按钮都显式写清楚 type。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
