html中readonly与disabled_html表单属性区别-html教程-PHP中文网

readonly属性允许表单提交其值，disabled属性则阻止提交；前者适用于需保留值的只读展示（如用户ID），后者适用于临时禁用且不提交的控件（如未同意协议时的提交按钮）。

html中readonly与disabled_html表单属性区别

readonly 属性只阻止输入，不阻止表单提交

readonly 会让或内容不可编辑，但元素仍可聚焦、可选中、可复制，关键点是：它的值会随表单一起提交。常见于展示型字段（如用户 ID、订单编号）需保留但禁止修改的场景。

容易踩的坑：

readonly 对、、等无效 —— 浏览器直接忽略，不会产生任何行为
用 JavaScript 动态设置时，写法是 element.readOnly = true（注意大小写，是 readOnly，不是 readonly）
如果同时设了 readonly 和 disabled，disabled 优先级更高，readonly 被覆盖

disabled 属性让控件完全失效且不参与提交

disabled 不仅禁用编辑，还导致元素无法聚焦、无法选中、无法复制，更重要的是：它的值**不会被包含在表单提交数据中**（即后端收不到该字段）。适用于临时禁用某项功能（如“同意协议”未勾选时禁用提交按钮）。

使用注意：

disabled 对所有表单控件都有效，包括、、，甚至能作用于整个
被 disabled 的元素不会触发 click、focus 等事件（监听也收不到）
样式上默认变灰、透明度降低，但可通过 CSS 的 :disabled 伪类自定义，例如 input:disabled { background: #f5f5f5; }

表单提交时它们对 name/value 的影响完全不同

这是最常被忽视的实际后果：哪怕你只是想“显示但不让改”，选错属性就会丢数据。

假设表单里有：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

<input name="user_id" value="12345" readonly><input name="status" value="pending" disabled>

提交后，后端收到的键值对只有 user_id=12345；status 字段压根不会出现在请求体里。

所以判断依据很直接：

需要后端接收这个字段的值？→ 用 readonly
只是临时屏蔽交互，且不希望它出现在提交数据中？→ 用 disabled
要兼容旧浏览器（比如 IE8）？两者都支持，但 disabled 在表单级控制更稳定

JavaScript 操作时的差异与风险

用脚本切换状态时，行为不一致很容易引发 bug。

disabled 是布尔属性，设为 false 即启用：el.disabled = false；而 readonly 同样是布尔属性，但某些老版本 Safari 对 el.readOnly = false 响应迟钝，稳妥做法是显式移除属性：el.removeAttribute('readonly')。

另外要注意：