button[type="submit"]支持嵌套HTML内容（如图标、样式文本），语义清晰、disabled控制稳定；input[type="submit"]仅支持纯文本value，不支持伪元素和复杂可访问性，现代开发优先选用button。
button[type="submit"] 和 input[type="submit"] 的实际差异
视觉上几乎没区别，但底层行为和扩展性差很多。button[type="submit"] 支持嵌套任意 HTML 内容（比如 <svg> 图标、<span> 文字加粗），而 input[type="submit"] 只能靠 value 属性控制纯文本，改文案就得改属性值，没法加样式钩子。
真正容易踩的坑是：用 input[type="submit"] 时误以为它“更原生更安全”，结果发现它不支持 ::before/::after 伪元素，也没法绑定 aria-label 或处理复杂可访问性场景。现代项目里，只要不是兼容 IE8 这种老古董，优先选 button[type="submit"]。
button 不写 type 属性会怎样
在 <form> 内部，<button> 没写 type 就默认是 type="submit"——这不是浏览器 bug，是 HTML 规范强制要求的行为。这意味着：
- 点一个本意是“取消”或“清空搜索框”的
<button>，表单会意外提交甚至刷新页面 - React 组件中绑了
onClick，但函数根本没执行，因为原生 submit 已经触发跳转 - SSR 模板里变量未兜底
type，上线后部分页面偶发提交空表单
修复方式极简单：所有非提交用途的按钮，一律显式写 type="button"。哪怕当前不在 <form> 里，也建议提前加上，避免后续重构漏改。
立即学习“前端免费学习笔记（深入）”；
formaction、formenctype 这些 form-* 属性怎么用
这些属性让按钮脱离所在 <form> 的约束，实现“一表多交”或“同页多路径提交”。关键点在于它们只对 type="submit" 有效，type="button" 完全无视。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
formaction 覆盖表单的 action，比如一个订单页有两个提交按钮：<button type="submit" formaction="/checkout">去结算</button> 和 <button type="submit" formaction="/save-draft">存草稿</button>；formenctype 同理覆盖 enctype，上传文件时可单独为某个按钮启用 multipart/form-data，而不用整个表单都改。
注意：form 属性可以指定按钮关联的表单 ID（即使按钮不在该表单内部），但必须确保目标 <form id="xxx"> 存在，否则提交失败且无提示。
disabled 属性为什么不能只靠 CSS 灰掉
disabled 是布尔属性，设了就禁用交互、阻止焦点、不参与表单提交。只用 CSS 把按钮变灰（比如 opacity: 0.5）完全无效——键盘用户仍可按 Enter 触发提交，屏幕阅读器也读不出禁用状态。
常见错误包括：
- 用 JS 控制
button.style.opacity = "0.5"后忘了同步设置button.disabled = true - 在 React 中用
className切换禁用样式，但没同步更新disabledprop - 用
pointer-events: none阻止点击，但表单验证仍会校验该按钮所在字段
真正可靠的做法：禁用状态必须由 disabled 属性控制，CSS 样式只是辅助视觉反馈。如果需要动态启用/禁用，直接操作 DOM 的 disabled 属性或 React 的对应 state 即可。
