不写type属性默认为submit，极易引发意外提交；必须显式声明type="button"、type="submit"或type="reset"，并在form上监听submit事件并preventdefault()才能安全控制表单行为。
在复杂表单里，<button></button>不写 type 就等于默认提交——哪怕你只想要一个“取消”或“预览”按钮，它也会偷偷发请求、刷页面、中断 fetch。
为什么复杂表单里 button 默认 type="submit" 更危险
简单表单只有一个输入框时，回车提交还能被感知；但复杂表单往往含多个 <input>、<select multiple></select>、动态显隐字段，用户根本意识不到某个没写 type 的按钮正在监听 submit 事件。
- 表单里嵌了子组件（比如 Vue/React 渲染的
<button></button>），模板未注入type，上线后突然提交空数据 - JS 动态插入按钮（如“添加一行”按钮），没补
type="button"，点一次就触发整个表单校验+提交 - 多个
<form></form>嵌套或并存时，按钮意外绑定到上层表单，event.target.form指向错误 - 使用
FormData手动收集数据时，submit事件仍会触发，但你可能没监听它，导致重复提交
type="button" 不是可选项，是必填项
别信“我这个按钮不在 form 里”——重构、抽组件、改 DOM 结构后它很可能就进去了。统一显式写 type="button" 是唯一低成本防御手段。
-
<button type="button">取消</button>：彻底静默，只响应 click -
<button type="submit">保存</button>：必须配<form onsubmit="e.preventDefault(); ..."></form>或全局拦截 -
<button type="reset">重置</button>：只还原 HTML 初始值，JS 改过的、动态加的字段不会清 - 任何非法
type（如type="primary"、type=""）都会降级：在<form></form>内当submit，表单外当button
submit 事件和 click 事件不是一回事
你给 <button type="submit"></button> 绑了 click，不代表能拦住提交——submit 是表单级事件，优先级更高，且不等 JS 执行完就发请求。
-
click只是用户按下再松开的瞬间；submit是整个表单验证通过后触发的最终动作 - 想用 JS 控制提交逻辑？必须监听
<form></form>的submit事件，并调用e.preventDefault() - 仅在按钮上
e.preventDefault()没用：它只阻止 click，submit 还会照常发生 - 表单校验失败时，
submit事件不触发，但click仍会执行——容易误判“点了没反应”
禁用按钮时，disabled 属性不能靠 CSS 模拟
用 opacity: 0.5 + pointer-events: none 看似禁用了，但语义上它仍是可交互元素，键盘用户 Tab 进去照样触发，屏幕阅读器会读出“可点击”，且表单提交时它仍参与序列化。
- 必须用原生
disabled属性：<button type="button" disabled>加载中...</button> -
disabled会自动屏蔽所有事件（click、focus、keydown），无需额外 JS - 样式要单独写：
button:disabled { cursor: not-allowed; opacity: 0.6; }，别依赖 JS 切 class - 服务端渲染或 SSR 页面，
disabled属性必须初始就存在，否则 JS 注入前有短暂可点击窗口
最易被忽略的是：即使你写了 type="button"，如果按钮被 JS 动态移出再插入到 <form></form> 内部，它的行为不会自动更新——DOM 节点重建后，浏览器重新解析属性，但开发者常以为“之前设过就安全了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
