form 表单中 disabled 属性的元素不参与表单提交

最新推荐文章于 2025-05-24 16:01:18 发布

原创最新推荐文章于 2025-05-24 16:01:18 发布 · 6.8k 阅读

2 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了HTML表单中input元素的disabled和readonly属性的区别。disabled属性的元素不会参与表单提交，而readonly的元素则可以在提交时包含。disabled的控件无法获取焦点和被tab键选中，而readonly的控件则可以接收焦点但不可修改。在实际应用中，如果需要元素在界面不可修改但能提交，应使用readonly属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例代码：

<form id="saveForm">

    <input id="saveForm-age" name="age" disabled="disabled" />

    <input id="saveForm-age" name="age" disabled="true" />

</form>

当上述两种写法出现时，表单提交的数据中，将不包括 age 这个属性，这是因为 input 被设置为了 disabled。

若想将 age 属性随 form 表单提交，个人推荐解决办法是不设置 disabled，改为 readonly，具体参照 W3C 的规范。

input 设置 disabled 和 readonly 的区别

disabled 的限制：

不能接收焦点
使用 tab 键时将被跳过
可能不是 successful 的

readonly 的限制：

可以接收焦点但不能被修改
可以使用 tab 键进行导航
可能是 successful 的

只有 successful 的表单元素才是有效数据，也即是可以进行提交。disabled 和 readonly 的文本输入框只能通过脚本进行修改 value 属性。

disabled 和 readonly 两个 HTML 属性的区别

readonly 是要锁定这个控件，通过在界面上无法修改他（但是通过 javascript 可以修改它）。
disabled 和 readonly 有相同的地方也是可以锁定这个控件用户不能改变他的值，但是 disabled 的更彻底一些，这是要使控件完全不能使用，彻底失效，包括改变它的背景颜色（不信，你去修改一个被 disabled 掉的 input 文本框，发现这是徒劳的），如果是 checkbox 则不能选中它。
所有控件都有 disabled 属性，但是不一定有 readonly 属性，如 select 下拉框。