HTML Input disabled和readonly对比

禁用输入字段。

代码示例

<form>
 <label for="disabled">Disabled</label><br>
 <input name="disabled" value="You cannot edit me." disabled>
</form>

已禁用

disabled对比readonly

disabled和属性具有相似的readonly效果——事实上，从用户的角度来看，它们看起来是一样的。在这两种情况下，用户看到的是一个略微“变灰”的字段，无法点击或编辑。

<form>
 <label for="disabled">Disabled</label><br>
 <input name="disabled" value="disabled" disabled>
 <br><br>
 <label for="readonly">Readonly</label><br>
 <input name="readonly" value="readonly" readonly>
</form>

已禁用

只读

但是，它们是不同的，使用错误的可能会导致问题。

如果字段是disabled，则在提交表单时不会将字段的值发送到服务器。如果字段是，readonly则将值发送到服务器。

提示：如果出于某种原因您_真的_不希望将特定字段的值包含在表单提交请求中，您可能需要查看服务器端表单处理。恶意用户可能会覆盖表单输入的disabled属性并发送他们喜欢的任何表单数据。实际上，任何元素都是如此——永远不要忘记考虑服务器端表单验证和清理。