button元素type属性必须显式声明，否则默认为submit导致表单误提交；所有button应设type="button"/"submit"/"reset"，禁用时用disabled属性而非CSS模拟。
button 元素的 type 属性必须显式声明
不写 type 属性时，<button> 在多数浏览器中默认为 submit，点击会触发表单提交——这是误提交最常见源头。哪怕按钮只是用来弹窗或切换状态，只要它在 <form> 内且没设 type，就危险。
实操建议：
- 所有
<button>都显式写上type="button"（普通操作）、type="submit"（确认提交）或type="reset"（重置表单） - 尤其注意模态框关闭按钮、Tab 切换按钮、复制文本按钮——它们常被随手放在 form 里，却忘了加
type="button" - 用 ESLint 插件
jsx-a11y/interactive-supports-focus或自定义规则检测缺失type的<button>
避免用 div/span 模拟按钮却不处理键盘交互
用 <div onclick="..."> 或 <span class="btn"> 代替 <button>，看似绕开了 type 问题，但引入更隐蔽的风险：无法用空格/回车触发、不被屏幕阅读器识别、focus 状态丢失。
这会导致用户按回车键时，焦点落在某个 div 上却无响应，反复按几次后意外触发表单内真正的 submit 按钮——尤其在快速填写场景下极易发生。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 只要行为是“触发动作”，就用
<button type="button">，不要降级为<div> - 若样式受限必须用非 button 元素，至少补上
role="button"、tabindex="0"和onkeydown={e => e.key === 'Enter' && e.key === ' '手动拦截 - 检查 tab 键顺序：确保所有可交互元素能被自然聚焦，且回车/空格都能触发相同逻辑
表单内多个 submit 按钮的 name/value 区分要明确
一个表单里放多个 <button type="submit"> 时，如果不设 name 和 value，提交时后端可能收不到操作意图，或所有按钮都提交相同值，导致逻辑分支失效。
比如“保存草稿”和“发布文章”两个按钮，若都用默认空 value，后端无法判断用户意图，只能靠 JS 注入隐藏字段——这增加耦合且易出错。
实操建议：
- 每个
type="submit"按钮必须带name（如name="action"）和唯一value（如value="draft"/value="publish"） - 服务端直接读取
action字段做路由，而非依赖 JS 添加的额外参数 - 避免用
id或class区分行为——它们不参与表单数据序列化
禁用按钮时别只靠 CSS opacity 或 pointer-events
仅用 style="opacity: 0.5; pointer-events: none;" 让按钮“看起来不可点”，但没设 disabled 属性，它仍会响应 click 事件、仍能被 focus、仍会参与表单提交——尤其当用户快速连点或键盘操作时，很容易绕过视觉限制。
更糟的是，pointer-events: none 会阻止事件冒泡，可能让外层 form 的监听失效，掩盖真实问题。
实操建议：
- 禁用状态一律用
disabled属性：<button type="submit" disabled> - 配合 CSS 用
button:disabled控制样式，而不是反过来用样式模拟禁用 - JS 中控制
disabled要同步更新状态变量，避免“界面禁用了但 JS 还在监听 click”这类竞争条件
type、name、disabled 是否按规范落到了 DOM 属性上——浏览器只认这个，JS 和 CSS 都是补丁。 
