readonly保留值提交且支持聚焦复制，disabled禁用交互且不提交值；readonly仅对text/password/textarea有效，disabled全支持；需“禁用但提交”时应配合hidden字段。
只读字段用 readonly 还是 disabled？看表单提交和交互需求
直接结论：readonly 保留字段值参与表单提交，用户不能编辑但可聚焦、可选中、可复制；disabled 则完全禁用交互，且该字段的值**不会被提交**到后端。选错会导致后端收不到数据或前端操作异常。
readonly 的典型使用场景和限制
适用于「展示+需提交」的只读内容，比如订单号、用户ID、预填但不可改的邮箱等。
-
readonly只对<input type="text">、<input type="password">、<textarea>有效，对<select>、<button>、<input type="checkbox">无效（浏览器忽略） - 元素仍能获得焦点（
tabindex生效），支持Ctrl+A全选、Ctrl+C复制，这对用户查信息很友好 - 样式上默认不灰化，如需视觉提示，得手动加 CSS：
input[readonly] { background-color: #f5f5f5; cursor: not-allowed; } - JS 中仍可通过
element.value = 'xxx'修改值，readonly是纯 HTML 层面约束
disabled 的行为特点和常见误用
disabled 是更彻底的禁用，但代价是字段值从表单序列化中被剔除——哪怕你在 JS 里设了 input.value = '123'，提交时也看不到它。
- 所有表单控件都支持
disabled，包括<select>、<input type="radio">、<button> - 元素无法聚焦、无法 tab 切入、无法复制，键盘鼠标事件全部被拦截
- 默认渲染为灰色（
opacity或color变化因浏览器而异），但样式可覆盖；注意：某些屏幕阅读器会跳过disabled元素，影响无障碍 - 如果需要“禁用但提交值”，必须换思路：用隐藏域
<input type="hidden" name="xxx" value="yyy">配合disabled的同名可见字段，或改用readonly+ 样式模拟禁用感
React/Vue 等框架中容易踩的坑
框架绑定属性时，readonly 和 disabled 都是布尔 prop，但语义混淆极易发生：
立即学习“前端免费学习笔记（深入）”；
- Vue 模板里写
:disabled="true"没问题，但若写成:readonly="someCondition"却忘了该属性只对文本类控件生效，<select :readonly="true">实际毫无作用 - React 中用
readOnly（驼峰），不是readonly；写成readonly={true}会被当字符串处理，导致属性始终存在但值为"true"，浏览器误判为真值而启用只读 - 服务端渲染（SSR）时，若初始状态用
disabled，但客户端 JS 后续未同步更新对应隐藏域，就可能造成提交数据缺失——这种不一致很难调试
最常被忽略的一点：表单验证库（如 Yup、Zod）通常不校验 disabled 字段，但会校验 readonly 字段——如果你靠 disabled “绕过”校验，实际只是掩盖了逻辑漏洞。
