表单按钮需显式声明type属性，禁用必须用disabled而非css，跨表单提交用form属性，文案应明确动作后果且支持无障碍。
表单按钮不是“写个 <button></button> 就完事”，它直接决定提交是否触发、校验是否生效、用户能否重试、屏幕阅读器怎么读——错一个属性，交互就断链。
button type 属性必须显式声明
放在 <form></form> 里的 <button></button> 默认就是 type="submit"，哪怕你没写。这会导致点击时既触发 JS 事件，又尝试提交表单，页面刷新或异步请求中断。
- 需要纯 JS 交互（比如展开下拉、切换 tab）→ 必须写
type="button" - 要提交当前表单 → 显式写
type="submit"，别依赖默认值 - 要重置表单 → 写
type="reset"，但注意它会清空所有字段初始值，慎用 - 不要省略
type，尤其在组件库或模板中容易漏掉
disabled 属性是唯一可靠的禁用方式
仅靠 CSS 设置 pointer-events: none 或透明度遮罩，按钮依然能被键盘回车、辅助技术或脚本触发，表单照样提交。
-
disabled会同时：阻止点击、跳过数据序列化、移出form.elements、自动失焦 - 动态启用/禁用时，别只改样式，必须同步操作
button.disabled = true/false - 校验失败后设
disabled = true，但后端返回 400 错误时，不该立刻设回false——否则用户可能重复提交无效数据 - 提交中状态建议加文案变化：
button.textContent = "提交中…"，成功后再恢复
form 属性用于跨表单控制
按钮不在 <form></form> 标签内？或者想让它提交另一个表单？不能靠 JS 调 form.submit()，那会绕过原生校验（required、pattern 等全失效）。
- 给目标
<form id="myForm"></form>，按钮写<button type="submit" form="myForm"></button> -
form属性只接受 ID 字符串，不支持 class 或 querySelector - 配合
formaction、formmethod可覆盖表单默认的 action 和 method，适合多入口提交同一表单但不同路径 - 别混用
form和onclick提交逻辑——语义冲突，可维护性差
按钮文案和内容结构影响无障碍与转化
“确定”、“提交”这种通用词对屏幕阅读器不友好，也降低用户预期清晰度；而 <input type="submit"> 无法嵌套图标或强调文字，限制表达力。
- 优先用动词短语：
注册账号、保存草稿、删除此订单，明确动作后果 - 需要图标+文字？必须用
<button type="submit"><svg>...</svg>确认支付</button>，<input type="submit">不支持子元素 - 旧 IE8 兼容需求极少，现在无理由用
<input type="submit">替代<button></button> - 按钮内不要放
<div> 或块级元素，可能破坏行内布局或触发渲染异常 <p>最容易被忽略的是：禁用状态是否真正阻断了所有触发路径（键盘、辅助技术、脚本），以及按钮文案是否让每个用户——无论用鼠标、键盘还是读屏软件——都清楚点击后会发生什么。这两点不验证，表单就算功能跑通，也算半残。</p> </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
