button在form内默认type="submit"，点击会提交表单导致页面刷新；应显式设置type="button"/"submit"/"reset"；禁用须用disabled属性；自定义样式前需重置appearance及边框、背景、padding等。
button 元素在表单中默认是 type="submit"，不显式声明就直接提交——这是绝大多数人遇到“点一下页面就刷新”的根本原因。
为什么
浏览器规范规定：<button></button> 在 <form></form> 内部时，若未设置 type 属性，行为等同于 type="submit"。哪怕按钮里只写了“取消”或“预览”，只要没写 type，它就会触发表单提交。
- 常见错误现象：
<form><button>取消</button></form>，用户点击后页面跳转或清空输入框 - JS 还没加载完、用户按回车、甚至 Safari 在 focus 状态下按空格，都可能触发默认提交
- 用
event.preventDefault()补救是治标不治本——应该从源头控制type
自定义按钮必须显式设 type 属性
根据你要实现的功能，type 只能是这三个值之一，不能省略：
- 要纯执行 JS（如弹窗、切换步骤、校验前置）：用
type="button" - 要真正提交表单数据：用
type="submit"，且确保该button在<form></form>标签内 - 要重置所有表单控件为初始值：用
type="reset"（注意：会清空所有已填内容，慎用）
示例：<button type="button" onclick="showPreview()">预览</button> —— 安全、可控、无副作用。
禁用状态必须用 disabled 属性，不是 CSS 模拟
仅靠 opacity: 0.5 或 pointer-events: none 无法阻止表单提交行为，用户仍可通过键盘（空格/回车）激活按钮。
- 正确做法：添加
disabled属性，浏览器会自动禁用交互并灰化样式 - JS 控制：
btn.disabled = true或btn.setAttribute('disabled', '') - CSS 中可用
button:disabled单独定义禁用态样式，但不要依赖它来“阻止点击”
自定义样式前先重置 appearance 和继承样式
不同浏览器对 button 的默认渲染差异极大：Safari 固执保留 padding 和 border，Firefox 加阴影，Chrome 继承父级 font-size 导致文字错位。不重置就写样式，等于在流沙上盖楼。
- 起步三件套必须加：
appearance: none、-webkit-appearance: none、-moz-appearance: none - 紧接着清掉：
border: none、background: none、padding: 0、font: inherit - 文字居中别只靠
text-align: center，推荐display: flex; align-items: center; justify-content: center
容易被忽略的一点：表单内多个 button 共享同一组 CSS 类时，type="submit" 和 type="button" 的视觉反馈必须有明确区分（比如颜色、边框、图标），否则用户无法直觉判断点击后会发生什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
