表单元素中readonly和disabled的区别

一、readonly和disabled作用元素的范围不同

disabled属性可以作用于所有的表单元素。

readonly属性只对、、和<input type="password">等可以输入的表单元素有效。</p> <h2> 二、readonly和disabled对元素的作用程度不同 </h2> <p>readonly属性只是将元素设置为只读，可以获取焦点、失去焦点。而disabled属性直接阻止对元素的一切操作。</p> <p>disabled属性阻止对元素的一切操作，例如获取焦点，点击事件等等。</p> <p>readonly属性只是将元素设置为只读，其他操作正常。</p> <h2> 三、readonly和disabled对表单提交的作用不同 </h2> <p>表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，</p> <p>而readonly会将该值传递出去（readonly接受值更改可以回传，disable接受改但不回传数据）</p> <p>disabled属性可以让表单元素的值无法被提交。</p> <p>readonly属性则不影响提交问题</p> <h2>总结</h2> <ul> <li> <strong>readonly 属性规定输入字段为只读</strong> 。 </li> </ul> <p>只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。</p> <p>readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。</p> <p>readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。</p> <ul> <li> <strong>disabled 属性规定应该禁用 input 元素</strong> 。 </li> </ul> <p>被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。</p> <p>注释：disabled 属性无法与 <input type="hidden"> 一起使用。</p> </div> </div> <br><p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 <a href='//www.codercto.com'>码农网</a></p> <div class="center-block" style="text-align: center;display: none;"> <img src="//www.codercto.com/static/common/images/gzh.jpg" alt="关注码农网公众号" class="img-thumbnail"> <p>关注我们，获取更多IT资讯^_^</p> <br> </div> <p></p> <p> <i class="fa fa-tags" aria-hidden="true"></i> <a target="_blank" href="https://www.codercto.com/tags.html">查看所有标签</a> </p> <strong>猜你喜欢:</strong> <ul> <li><a href="https://www.codercto.com/a/50952.html" target="_blank">php – 禁用表单元素的POST值</a></li> <li><a href="https://www.codercto.com/a/51618.html" target="_blank">ajax -jquery.load()用于POST表单的所有元素,而不必指定POST的内容</a></li> <li><a href="https://www.codercto.com/a/50936.html" target="_blank">表单 – 避免Symfony强制显示表单字段</a></li> <li><a href="https://www.codercto.com/a/5004.html" target="_blank">细说 Angular 2+ 的表单（二）：响应式表单</a></li> <li><a href="https://www.codercto.com/a/83857.html" target="_blank">CSS 基础：块级元素、行内元素、替换元素、非替换元素</a></li> <li><a href="https://www.codercto.com/a/9763.html" target="_blank">8款最新CSS3表单 环形表单很酷</a></li> </ul> <blockquote><p>本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请<a href="https://www.codercto.com/contact.html" rel="nofollow" target="_blank">联系我们</a>。</p></blockquote> </div> </div> <div class="card markdown"> <div class="card-header"><a href="https://www.codercto.com/books.html">码农书籍</a></div> <div> <div class="float-left" style="padding: 10px;"><a href="https://www.codercto.com/books/d/1593.html"><img style="height: 140px;" class="media-object" src="https://img1.3s78.com/codercto/c54996c09c78ff463927e82effa780ef" alt="Sexy Web Design"></a></div> <div class="" style="padding: 10px;"> <a href="https://www.codercto.com/books/d/1593.html"><h4>Sexy Web Design</h4></a> <p>Elliot Stocks / SitePoint / 2009-03-28 / $39.95</p> <p>Description A guide to building usable, aesthetically pleasing interfaces for web sites and web applications by applying timeless principles of user-centered design. This book focuses on practical ......一起来看看 <a href="https://www.codercto.com/books/d/1593.html">《Sexy Web Design》</a> 这本书的介绍吧!</p> </div> </div> </div> <div class="card markdown"> <div class="card-header"><a href="https://www.codercto.com/tool.html">码农工具</a></div> <div class="row" style="padding: 10px;"> <div class="col-sm-6 col-md-4"> <div class="media"> <div class="media-left" style="margin-right: 5px;"><a href="https://www.codercto.com/tool/rgb_to_16hex.html"><img class="media-object" width="64" src="https://img1.3s78.com/codercto/9ebb4569349037985b352bf1ee5cbbdd" alt="RGB转16进制工具"></a></div> <div class="media-body"> <a href="https://www.codercto.com/tool/rgb_to_16hex.html"><h6 class="media-heading"><span>RGB转16进制工具</span></h6></a> <p><span>RGB HEX 互转工具</span></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="media"> <div class="media-left" style="margin-right: 5px;"><a href="https://www.codercto.com/tool/xml_json.html"><img class="media-object" width="64" src="https://img1.3s78.com/codercto/2d88ed2b142f986dc78954592f06ea78" alt="XML、JSON 在线转换"></a></div> <div class="media-body"> <a href="https://www.codercto.com/tool/xml_json.html"><h6 class="media-heading"><span>XML、JSON 在线转换</span></h6></a> <p><span>在线XML、JSON转换工具</span></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="media"> <div class="media-left" style="margin-right: 5px;"><a href="https://www.codercto.com/tool/regular.html"><img class="media-object" width="64" src="https://img1.3s78.com/codercto/e811b792d7c7b9f1f1008c71ca53a54b" alt="正则表达式在线测试"></a></div> <div class="media-body"> <a href="https://www.codercto.com/tool/regular.html"><h6 class="media-heading"><span>正则表达式在线测试</span></h6></a> <p><span>正则表达式在线测试</span></p> </div> </div> </div> </div> </div> </div> <div class="sidebar col-md-3"> <div class="card"> <div class="card-body"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:250px;height:250px" data-ad-client="ca-pub-5598567030231501" data-ad-slot="6435657477"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="card tagMenu"> <div style="background: #f5f5f5;" > <div class="tabs_menu"> <li style="width: 50px;">New</li> <li id="newestArticles" class="selected" onclick="showNewestData('newestArticles');">文章</li> <li id="newestTopics" onclick="showNewestData('newestTopics');">话题</li> <li id="newestCourses" onclick="showNewestData('newestCourses');">教程</li> </div> </div> <ul class="list-group list-group-flush newestArticles"> <li class="list-group-item">· <a href="https://www.codercto.com/a/131449.html">苹果：开发者计划所有会员到本月底必须启用两步认证</a></li> <li class="list-group-item">· <a href="https://www.codercto.com/a/131448.html">NG-ZORRO-MOBILE 0.11.0 发布，antd 移动规范的 Angular 实现</a></li> <li class="list-group-item">· <a href="https://www.codercto.com/a/131447.html">韩国Luna币暴跌 分析师：Luna 2.0也没戏 过去一周缩水一多半</a></li> <li class="list-group-item">· <a href="https://www.codercto.com/a/131446.html">苹果鼓励Beta测试者提交错误来提高iOS 16的软件质量</a></li> <li class="list-group-item">· <a href="https://www.codercto.com/a/131445.html">2021全球半导体设备厂商TOP15：ASML只第二、中国仅1家</a></li> <li class="list-group-item">· <a href="https://www.codercto.com/a/131444.html">Windows 11 RTM版存在BUG：符合条件设备显示不支持升级</a></li> </ul> <ul style="display: none" class="list-group list-group-flush newestTopics"> <li class="list-group-item">· <a href="https://www.codercto.com/topics/50935.html">2025年4月01日 程序员老黄历，宜:面试,在妹子面前吹牛</a></li> <li class="list-group-item">· <a href="https://www.codercto.com/topics/50934.html">中国信通院：2 月国内市场手机出货量 1966.2 万部，同比增长 37.9%</a></li> <li class="list-group-item">· <a href="https://www.codercto.com/topics/50933.html">谷歌 Gemini 将集成到 Chrome 浏览器侧边栏，类似 Edge Copilot</a></li> <li class="list-group-item">· <a href="https://www.codercto.com/topics/50932.html">X 平台被曝遭遇严重数据泄露，涉及超 28 亿条个人数据信息</a></li> <li class="list-group-item">· <a href="https://www.codercto.com/topics/50931.html">安全公司揭露黑客冒称“电竞团队”，利用“免费开箱”骗局针对《CS2》玩家进行钓鱼攻击</a></li> <li class="list-group-item">· <a href="https://www.codercto.com/topics/50930.html">2025年3月31日 程序员老黄历，宜:写单元测试,白天上线</a></li> </ul> <ul style="display: none" class="list-group list-group-flush newestCourses"> <li class="list-group-item">· <a href="https://www.codercto.com/courses/d/4242.html">JMeter录制登录测试</a></li> <li class="list-group-item">· <a href="https://www.codercto.com/courses/d/4241.html">JMeter分布式负载测试（吞吐量控制器）</a></li> <li class="list-group-item">· <a href="https://www.codercto.com/courses/d/4240.html">JMS主题测试计划</a></li> <li class="list-group-item">· <a href="https://www.codercto.com/courses/d/4239.html">JMS点对点测试计划</a></li> <li class="list-group-item">· <a href="https://www.codercto.com/courses/d/4238.html">JMeter JMS测试计划</a></li> <li class="list-group-item">· <a href="https://www.codercto.com/courses/d/4237.html">JMeter Webservice API测试计划</a></li> </ul> <script> function showNewestData(id) { $('.newestArticles,.newestTopics,.newestCourses').hide(); $('#newestArticles,#newestTopics,#newestCourses').removeClass('selected'); $('#'+id).addClass('selected'); $('.'+id).show(); } </script> </div> <div class="card"> <div class="card-header">关注 码农网 公众号</div> <div class="card-body"><img src="//www.codercto.com/static/common/images/gzh.jpg"></div> </div> </div> </div> </div> <script> var contentType = 1; var contentId = '91221'; var updatePvUrl = 'https://www.codercto.com/articles/updatePv'; </script> <script src="//www.codercto.com/static/common/js/copyright.js"></script> <style> .main-footer .tag-cloud a{border:1px solid #ebebeb;padding:2px 7px;color:#959595;line-height:1.5em;display:inline-block;margin:0 7px 7px 0;-webkit-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease} .main-footer .tag-cloud a:hover{color:#ffffff;background:#379be9;border:1px solid #379be9;text-decoration:none} .main-footer .widget .recent-post .recent-single-post{border-bottom:1px dashed #ebebeb;padding-bottom:5px;margin-bottom:10px}.main-footer .widget .recent-post .recent-single-post:last-child{margin-bottom:0}.main-footer .widget .recent-post .recent-single-post .post-title{color:#505050;-webkit-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}.main-footer .widget .recent-post .recent-single-post .post-title:hover{color:#379be9;text-decoration:none}.main-footer .widget .recent-post .recent-single-post .date{color:#959595}.main-footer .widget .recent-post .recent-single-post{border-bottom:1px dashed #303030}.main-footer .widget .recent-post .recent-single-post .post-title{color:#959595}.main-footer .widget .recent-post .recent-single-post .post-title:hover{color:#379be9}.main-footer .widget .recent-post .recent-single-post .date{color:#505050} .main-footer .widget{padding:0px 10px}.widget{margin-bottom:35px}.widget .title{margin-top:0;padding-bottom:7px;border-bottom:1px solid #ebebeb;margin-bottom:21px;position:relative}.widget .title:after{content:"";width:90px;height:1px;background:#379be9;position:absolute;left:0;bottom:-1px}.main-footer{background:#202020;padding:35px 0 0;color:#959595}.main-footer .widget .title{color:#ffffff;border-bottom:1px solid #303030}.main-footer .widget .tag-cloud a{border:1px solid #303030}.main-footer .widget .tag-cloud a:hover{border:1px solid #379be9}.main-footer .widget .friend-links a{border:none}.main-footer .widget .friend-links a:hover{border:none}.main-footer .widget .friend-links hr{margin:1em 0;border-top:1px dashed #303030}.main-footer .widget .recent-post .recent-single-post{border-bottom:1px dashed #303030}.main-footer .widget .recent-post .recent-single-post .post-title{color:#959595}.main-footer .widget .recent-post .recent-single-post .post-title:hover{color:#379be9}.main-footer .widget .recent-post .recent-single-post .date{color:#505050}.copyright{background:#111;font-size:13px;text-align:center;color:#555555;padding-top:28px;padding-bottom:28px;border-top:1px solid #303030}.copyright span{margin:0 .5em}.copyright a{color:#555555} .main-footer .recent-single-post{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} #roll{bottom:70px;float:right;position:fixed;right:50px;width:32px;z-index:9999} #roll_top,#roll_bottom{position:relative;cursor:pointer;height:32px;width:32px;border-radius:4px} #roll_top{background:url("//www.codercto.com/static/v3/images/rolls.png") no-repeat} #roll_top:hover{background:url("//www.codercto.com/static/v3/images/rolls.png") no-repeat -32px 0} #roll_bottom{background:url("//www.codercto.com/static/v3/images/rolls.png") no-repeat 0 -64px;margin-top:6px} #roll_bottom:hover{background:url("//www.codercto.com/static/v3/images/rolls.png") no-repeat -32px -64px} footer{margin-top:50px;margin-bottom: 0;} </style> <footer class="main-footer"> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="widget"> <h4 class="title">码农网最新文章</h4> <div class="content recent-post"> <div class="recent-single-post"><a href="https://www.codercto.com/a/131449.html" class="post-title">苹果：开发者计划所有会员到本月底必须启用两步认证</a></div><div class="recent-single-post"><a href="https://www.codercto.com/a/131448.html" class="post-title">NG-ZORRO-MOBILE 0.11.0 发布，antd 移动规范的 Angular 实现</a></div><div class="recent-single-post"><a href="https://www.codercto.com/a/131447.html" class="post-title">韩国Luna币暴跌 分析师：Luna 2.0也没戏 过去一周缩水一多半</a></div><div class="recent-single-post"><a href="https://www.codercto.com/a/131446.html" class="post-title">苹果鼓励Beta测试者提交错误来提高iOS 16的软件质量</a></div><div class="recent-single-post"><a href="https://www.codercto.com/a/131445.html" class="post-title">2021全球半导体设备厂商TOP15：ASML只第二、中国仅1家</a></div> </div> </div> </div> <div class="col-sm-4"> <div class="widget"> <h4 class="title">码农网最新帖子</h4> <div class="content recent-post"> <div class="recent-single-post"><a href="https://www.codercto.com/topics/50935.html" class="post-title">2025年4月01日 程序员老黄历，宜:面试,在妹子面前吹牛</a></div><div class="recent-single-post"><a href="https://www.codercto.com/topics/50934.html" class="post-title">中国信通院：2 月国内市场手机出货量 1966.2 万部，同比增长 37.9%</a></div><div class="recent-single-post"><a href="https://www.codercto.com/topics/50933.html" class="post-title">谷歌 Gemini 将集成到 Chrome 浏览器侧边栏，类似 Edge Copilot</a></div><div class="recent-single-post"><a href="https://www.codercto.com/topics/50932.html" class="post-title">X 平台被曝遭遇严重数据泄露，涉及超 28 亿条个人数据信息</a></div><div class="recent-single-post"><a href="https://www.codercto.com/topics/50931.html" class="post-title">安全公司揭露黑客冒称“电竞团队”，利用“免费开箱”骗局针对《CS2》玩家进行钓鱼攻击</a></div> </div> </div> </div> <div class="col-sm-4"> <div class="widget"> <h4 class="title">码农网关键词</h4> <div class="content tag-cloud friend-links"> <a href="//www.codercto.com">码农网</a> <a href="//www.codercto.com">码农</a> <a href="//www.codercto.com">程序员</a> <a href="//www.codercto.com">码农教程</a> <a href="//www.codercto.com">码农社区</a> <a href="//www.codercto.com">码农工具</a> <a href="//www.codercto.com">码农日报</a> <a href="//www.codercto.com">码农头条</a> <a href="//www.codercto.com">码农网论坛</a> <a href="//www.codercto.com">码农网源码</a> <a href="//www.codercto.com">码农网官网</a> </div> </div> </div> </div> </div> </footer> <div class="copyright"> <div class="container"> <div class="row"> <div class="col-sm-12"> <span>版权所有，保留一切权利！© 2018-2025 <a href="//www.codercto.com">码农网</a></span> <a href="https://beian.miit.gov.cn/#/Integrated/index" rel="nofollow" target="_blank">粤ICP备17054400号-3</a> </div> </div> </div> </div> <div id="roll" class="hidden-xs"> <div title="回到顶部" id="roll_top"></div> <div title="转到底部" id="roll_bottom"></div> </div> <script src="//www.codercto.com/static/common/highlight.js/9.15.9/highlight.min.js"></script> <script src="//www.codercto.com/static/common/highlight.js/9.15.9/jquery.4.2.2.form.min.js"></script> <script src="//www.codercto.com/static/common/js/spop.min.js"></script> <script> $(function () { $.ajax({ headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, url:updatePvUrl, type:'post', data:{contentId:contentId}, success:function () {} }) $('.likeable').click(function () { $('#myModal').modal();return false; }) $('.bookmark').click(function () { $('#myModal').modal();return false; }) }) </script> <script src="//www.codercto.com/static/common/js/prettify.js"></script> <script src="//www.codercto.com/static/common/js/jquery.1.9.1.lazyload.min.js"></script> <script>$(".markdown-body img").lazyload({effect : "fadeIn"})</script> <script> $(function () { hljs.initHighlightingOnLoad(); $('#roll_top').click(function() { $('body,html').animate({ scrollTop: '0px' }, 900); }); $("#roll_bottom").click(function() { $('body,html').animate({ scrollTop:$("footer").offset().top },800); }); if($('div').hasClass('float')) { var $sidebar = $(".float"), $window = $(window), offset = $sidebar.offset(), topPadding = 80; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); } }) </script> <!--baidu数据提交 start--> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <!--baidu数据提交 end--> <!--baidu统计--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?552b747d172e1541cf0f7e748f6c4d59"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>