readonly能否随表单提交_HTML只读与禁用传值差异

readonly的值会随表单提交，disabled的值则完全不提交；前者可聚焦、复制，后者不可交互且置灰，且disabled对所有表单元素生效而readonly仅适用于text/password/textarea。

能，readonly 的值会随表单提交；disabled 的值则完全不会出现在提交数据中。这是最常被误判的核心点——选错属性，后端就收不到那个字段的值。

表单提交时，readonly 和 disabled 的实际行为差异

浏览器在序列化表单（比如 form.submit() 或原生提交）时，只包含 name 属性存在且未被 disabled 的控件。而 readonly 不影响参与序列化。

• readonly：字段可聚焦、可复制、可选中，值照常提交 —— 适合“展示+需回传”的场景，如订单号、用户 ID
• disabled：字段无法交互、不接收焦点、键盘/鼠标事件被拦截，值从提交 payload 中彻底剔除 —— 适合“临时屏蔽且不参与业务流”的控件，如未勾选协议时的提交按钮
• 若同时设置 readonly 和 disabled，disabled 优先级更高，readonly 被忽略

readonly 为什么对 <select>、<checkbox> 没反应？

HTML 规范明确限定：readonly 只对 <input type="text">、<input type="password">、<textarea> 生效；其他控件（包括 <select>、<input type="radio">、<button>）会直接忽略该属性，既不生效也不报错。

• 想让 <select> “只读但提交”，只能用 JS 拦截 change 事件 + 保持 value 不变，或改用 disabled + 配合 <input type="hidden"> 补值
• <input type="checkbox"> 设 readonly 后仍可点击切换状态 —— 它根本不识别这个属性
• 框架里（如 Vue/React）动态绑定时更易踩坑：Vue 写 :readonly="true" 对 <select> 无效；React 必须用 readOnly（驼峰），写成 readonly={true} 会被当字符串处理

JS 修改 readonly 元素的值，会影响提交吗？

会。HTML 层面的 readonly 是纯 UI 约束，不阻止 JS 赋值；只要元素有 name 且没被 disabled，它的当前 value 就会提交。

立即学习“前端免费学习笔记（深入）”；

• document.querySelector('input').value = 'new-value'; —— 提交时就是 new-value
• 但注意：如果服务端依赖该字段不可变（比如防篡改校验），仅靠 readonly 完全不可信，必须配合后端验证
• 某些表单验证库（如 Yup、Zod）默认校验 readonly 字段，但跳过 disabled 字段 —— 这可能造成前端校验通过、后端拒绝的错觉

需要“禁用视觉 + 提交值”，该怎么做？

没有标准 HTML 属性能同时满足；必须组合实现。最稳妥的方式是：disabled 控件 + 同名 <input type="hidden">。

• 例如：<input type="text" name="user_id" value="123" disabled><input type="hidden" name="user_id" value="123">
• 用 CSS 模拟禁用感：input[readonly] { background: #f5f5f5; cursor: not-allowed; }，但别忘了加 tabindex="-1" 防止键盘聚焦干扰
• SSR 场景下尤其注意：服务端渲染出 disabled，客户端 JS 却没同步更新 hidden 字段，会导致提交值为空或旧值 —— 这类不一致很难 debug

真正容易被忽略的是：表单验证逻辑、无障碍支持、框架绑定方式、以及 SSR 与客户端状态的一致性——这些地方出问题，往往比属性写错更难定位。