input标签中readonly和disabled的区别

最新推荐文章于 2025-07-26 11:04:40 发布

原创最新推荐文章于 2025-07-26 11:04:40 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#表单 #input标签

本文探讨了HTML表单中input标签的readonly与disabled属性的区别。两者都能阻止用户直接修改输入框内的值，但设置为disabled的表单不会被提交，而readonly可以。此外，还讨论了这两种属性在实际应用中的差异。

input标签中readonly和disabled的区别

功能描述：增加input标签，里面有默认值，而且用户不可修改默认值。
问题描述：将input标签设置了disabled属性，提交表单后发现默认值并没有提交。
原因：readonly和disabled都不可以直接修改，但设置了disabled属性的表单不会被提交，readonly可以被提交。还有其它一些区别，请参考该链接。：

修改前：

<div class="form-group"><label>仓库代码： </label>
    <div class="input-group">
        <div class="input-group-addon">
            <i class="glyphicon glyphicon-home"></i>
        </div>
        <input type="text" id="warehouse" name="warehouse" value="${channCode}" class="form-control" data-mask="" disabled><!-- 修改前 -->
    </div>
</div>

修改后：

<div class="form-group"><label>仓库代码： </label>
    <div class="input-group">
        <div class="input-group-addon">
            <i class="glyphicon glyphicon-home"></i>
        </div>
        <input type="text" id="warehouse" name="warehouse" value="${channCode}" class="form-control" data-mask="" readonly><!-- 修改后 -->
    </div>
</div>