标签或具体的
、
和
标签上使用。" /> <link rel="stylesheet" type="text/css" href="/source/public/vue/css/main_blog.css" /> <link rel="stylesheet" href="http://www.yunxi10.com/source/public/js/github-markdown-light.css" /> <script src="http://www.yunxi10.com/source/public/js/highlight.min.js"></script> <script src="http://www.yunxi10.com/source/public/js/highlightjs-line-numbers.min.js"></script> <script src="http://www.yunxi10.com/source/public/js/jquery.min.js"></script> <script src="http://www.yunxi10.com/source/public/js/jquery.lazyload.js"></script> <script src="http://www.yunxi10.com/source/public/js/service/http.js" type="text/javascript"></script> <script src="http://www.yunxi10.com/source/public/js/function/swint.js" type="text/javascript"></script> <script src="http://www.yunxi10.com/source/public/js/function/builtin.js" type="text/javascript"></script> <script src="http://www.yunxi10.com/source/public/js/function/mongodb.common.js" type="text/javascript"></script> <script src="http://www.yunxi10.com/admincms/public/js/mongodb.js" type="text/javascript"></script> <script src="http://www.yunxi10.com/source/plugin/slide/slide.js" type="text/javascript"></script> </head> <body><script src="http://www.yunxi10.com/source/public/js/blog.js" type="text/javascript"></script> <header class="header" > <div class="head-wrap plr25"> <!-- LOGO --> <div class="header-left logo" style="width: 125px !important"> <h1 class="nobold"> <a href="/" title="博客站" class="align_left font24"> <i class="iconfont icon-blog-1 font24 cl-red"></i> 博客站 </a> </h1> </div> <!-- 导航栏 --> <div class="header-content w600 left"> <ul class="naverlist clearfix" style="display: flex"> <li class="relative" color=""> <a href="/" title="首页" style="" target="" >首页 </a> </li> <li class="relative" color=""> <a href="/article/" title="文章" style="" target="" >文章 </a> </li> <li class="relative" color=""> <a href="/notes/" title="笔记" style="" target="" >笔记 </a> </li> <li class="relative" color=""> <a href="/tech/" title="知识" style="" target="" >知识 </a> </li> <li class="relative" color=""> <a href="http://www.yunxi10.com" title="素材" style="" target="_blank" >素材 </a> </li> <li class="relative" color="#44b2ec"> <a href="/funny/" title="搞笑" style="" target="" >搞笑 </a> </li> <li class="relative" color=""> <a href="/words/" title="语录" style="" target="" >语录 </a> </li> <li class="relative" color=""> <a href="/website/" title="好站" style="" target="" >好站 </a> </li> <!-- 更多菜单 --> <li class="more relative pt5 plr10"> <i class="iconfont icon-more1 font20"></i> <div class="morelist absolute pt35" style=" background: #f7f8fa; top: 90px; left: 0; box-shadow: none;"> <div class="col-md-3"> <a href="/questions/" title="问答" style="line-height: 32px;" > <div class="mb10 align_center" style="flex: 1 1 0%;"> <div class="icon-wrap" style="background: #d09c63;"> <i class="iconfont font28 cl-white icon-vote" style="color: rgb(255, 152, 0);"></i> </div><div class="font12">问答</div> </div> </a> </div> <div class="col-md-3"> <a href="/image/" title="摄影" style="line-height: 32px;" > <div class="mb10 align_center" style="flex: 1 1 0%;"> <div class="icon-wrap" style="background: ;"> <i class="iconfont font28 cl-white icon-" style="color: rgb(255, 152, 0);"></i> </div><div class="font12">摄影</div> </div> </a> </div> <div class="col-md-3"> <a href="http://good1230.com" title="Good博客" style="line-height: 32px;" > <div class="mb10 align_center" style="flex: 1 1 0%;"> <div class="icon-wrap" style="background: ;"> <i class="iconfont font28 cl-white icon-" style="color: rgb(255, 152, 0);"></i> </div><div class="font12">Good博客</div> </div> </a> </div> <div class="col-md-3"> <a href="/bookmark.html" title="收藏夹" style="line-height: 32px;" > <div class="mb10 align_center" style="flex: 1 1 0%;"> <div class="icon-wrap" style="background: ;"> <i class="iconfont font28 cl-white icon-" style="color: rgb(255, 152, 0);"></i> </div><div class="font12">收藏夹</div> </div> </a> </div> </div> </li> </ul> </div> <div class="font14 right" style="padding-top: 25px; width: 220px"> <!-- 站内搜索 --> <div class="plr10" style="background: #f7f8fa; display: flex; border-radius: 30px"> <input id="search-input" type="text" value="" style="background: none; border: none; width: 100%; height: 36px" placeholder="输入关键词搜索" autocomplete="off" class="keywords" style="flex: 1" /><i id="search-btn" class="iconfont icon-search font20 cl-ccc" style="margin-top: 8px;"></i> </div> </div> <div class="ml25 right flex bold font18" style="width: 230px"> <div class="mr15 gongzhonghao"><i class="iconfont icon-qr cl-green"></i>微信公众号 <div class="qr-wrap"> <img src="/source/public/images/wxgzh.jpg" style="width: 200px; height: 200px;"> <div class="text mt15">扫描关注微信公众号</div> </div> </div> <div> <a href="/home" class="p0" target="_blank" rel="nofollow" ><i class="iconfont icon-blog-1 cl-red"></i>博客大厅</a></div> </div> <!-- 登录 --> <div class="member-login header-right blog-login align_right" style="width: 220px" ></div> </div> </header> <!--主体内容--> <section class="mt30 mb30"> <div class="container w1360 mb15"> <input id="artid" type="hidden" value="175" data-coding="U0020000" /> </div> <div class="container w1360 flex"> <div class="article mr25 p0 relative bg-white" style="width: 955px; min-height: 1000px" > <div class="position p25 font12"><a href='/' title='网站首页' >网站首页</a> > <a href="/tech/qianduan/" title="前端开发" >前端开发</a> > <a href="/tech/qianduan/html/" title="HTML" >HTML</a> > 正文</div> <div class="article-head"> <h2 class="font24"> <strong style="color: #404040">HTML5的form如何关闭自动完成功能?</strong> </h2> <div class="author"> <span class="mr25">原创</span> <span class="mr25" >来源:<a href="http://www.dongblog.com">博客站</a></span > <span class="mr25">阅读 <i id="view">0</i></span> <span class="mr25">01月22日 06:24</span> <span class="mr25" id="broadcast"><i class="iconfont icon-listen"></i>听全文</span> </div> </div> <div class="article-content font16 notes-code" style="margin: 0 25px; padding: 25px 0" > <div> <div id="broadcast-content" class="markdown-body"> <div class="markdown-body mb25"> <p>在HTML5中,你可以通过为表单或其输入元素添加 <code>autocomplete</code> 属性,并将其值设置为 <code>"off"</code> 来关闭自动完成功能。这个属性可以在 <code><form></code> 标签或具体的 <code><input></code>、<code><select></code> 和 <code><textarea></code> 标签上使用。</p> <h3>示例</h3> <ol> <li><strong>在整个表单上禁用自动完成</strong>:</li> </ol> <pre><code class="language-html"><form autocomplete="off"> <label for="username">Username:</label> <input type="text" id="username" name="username"> <label for="password">Password:</label> <input type="password" id="password" name="password"> <input type="submit" value="Submit"> </form> </code></pre> <ol start="2"> <li><strong>在特定输入元素上禁用自动完成</strong>:</li> </ol> <pre><code class="language-html"><form> <label for="username">Username:</label> <input type="text" id="username" name="username" autocomplete="off"> <label for="password">Password:</label> <input type="password" id="password" name="password" autocomplete="new-password"> <!-- 使用 "new-password" 可以进一步防止浏览器自动填充密码 --> <input type="submit" value="Submit"> </form> </code></pre> <h3>注意事项</h3> <ol> <li><p><strong>浏览器兼容性</strong>:尽管大多数现代浏览器都支持 <code>autocomplete="off"</code>,但一些浏览器(特别是Chrome)可能不完全遵守这个指令,尤其是在密码字段上。对于密码字段,使用 <code>autocomplete="new-password"</code> 是一种更好的做法,因为它通常能够防止浏览器保存和自动填充密码。</p> </li> <li><p><strong>用户体验</strong>:禁用自动完成功能可能会影响用户体验,特别是对于那些经常需要填写表单的用户。因此,在决定禁用自动完成功能之前,请仔细考虑其对用户体验的影响。</p> </li> <li><p><strong>隐私和安全</strong>:在某些情况下,禁用自动完成功能可能是出于隐私和安全考虑。确保在做出这种决策时考虑到这些因素。</p> </li> </ol> <p>通过正确使用 <code>autocomplete</code> 属性,你可以控制表单的自动完成行为,从而满足你的具体需求。</p> </div> <div class="module-wrap"> <div class="module-content label label-default"> <a href="/search.html?q=autocomplete" title="autocomplete" target="_blank">autocomplete</a><a href="/search.html?q=HTML5" title="HTML5" target="_blank">HTML5</a><a href="/search.html?q=自动完成" title="自动完成" target="_blank">自动完成</a><a href="/search.html?q=form" title="form" target="_blank">form</a><a href="/search.html?q=input" title="input" target="_blank">input</a><a href="/search.html?q=表单元素" title="表单元素" target="_blank">表单元素</a> </div> </div> </div> </div> <div class="module-wrap"> <div class="module-content p25" style="background: #f7f7f7;"> <div class="ml30 font24 bold">学在每日,进无止境!更多精彩内容请关注微信公众号。</div> <!-- 关注微信公众号获取更多相关系列内容知识 --> <img src="/source/public/images/wxgzh-2.jpg" width="100%"> </div> </div> <div style="margin: 25px 0; "> <div class="font14" style="margin-top: 30px; padding: 7px 0 7px 20px; border: 1px solid #ececec; background: #fafafa; line-height: 30px;"> <div>原文出处: 原创内容,请勿使用于商业用途。如若转载请注明原文及出处。 <div>出处地址:http://www.07sucai.com/tech/175.html</div> </div> <div>版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。</div> </div> </div> </div> <div class="related"> <p class="preg"> 阅读上一篇:<a href="/tech/174.html">什么是HTML5的离线储存?如何使用?</a> </p> <p class="next"> 阅读下一篇:<a href="/tech/176.html">HTML5 中如何嵌入音频?</a> </p> </div> <div class="module-wrap mb15"> <div class="module-head plr25"><h3>喜欢此内容的人还喜欢</h3></div> <div class="module-content plr25"> <ul class="clearfix"> <li class="list item"> <a href="/tech/530.html" target="_blank" style="font-family: 微软雅黑;"> <i class="iconfont icon-dot cl-ccc"></i>UniApp 如何处理网络请求? </a> </li> <li class="list item"> <a href="/tech/531.html" target="_blank" style="font-family: 微软雅黑;"> <i class="iconfont icon-dot cl-ccc"></i>UniApp 如何实现组件通信? </a> </li> <li class="list item"> <a href="/tech/525.html" target="_blank" style="font-family: 微软雅黑;"> <i class="iconfont icon-dot cl-ccc"></i>UniApp 如何优化性能? </a> </li> <li class="list item"> <a href="/tech/528.html" target="_blank" style="font-family: 微软雅黑;"> <i class="iconfont icon-dot cl-ccc"></i>UniApp 如何实现国际化? </a> </li> <li class="list item"> <a href="/tech/521.html" target="_blank" style="font-family: 微软雅黑;"> <i class="iconfont icon-dot cl-ccc"></i>UniApp 如何与原生代码交互? </a> </li> </ul> </div> </div> </div> <div style="width: 380px"> <!-- 分类 --> <div class="module-wrap"> <div class="module-content plr15 font12 label label-cate"> <a href="/tech/" title="全部" class=" current " >全部(902)</a > <a href="/tech/qianduan/json/" title="Json" class="" >Json(3)</a > <a href="/tech/qianduan/redux/" title="Redux" class="" >Redux(4)</a > <a href="/tech/weixin/uniapp/" title="Uniapp" class="" >Uniapp(47)</a > <a href="/tech/weixin/" title="微信公众号系列" class="" >微信公众号系列(160)</a > <a href="/tech/mianshi/" title="面试题" class="" >面试题(2)</a > <a href="/tech/anquan/" title="网络安全" class="" >网络安全(8)</a > <a href="/tech/database/mongodb/" title="Mongodb" class="" >Mongodb(0)</a > <a href="/tech/houduan/python/" title="Python" class="" >Python(12)</a > <a href="/tech/houduan/java/" title="Java" class="" >Java(4)</a > <a href="/tech/qianduan/uniapp/" title="Uni-app" class="" >Uni-app(28)</a > <a href="/tech/git/" title="Git" class="" >Git(2)</a > <a href="/tech/browser/" title="浏览器" class="" >浏览器(20)</a > <a href="/tech/qianduan/webpack/" title="Webpack" class="" >Webpack(35)</a > <a href="/tech/qianduan/sass/" title="Sass" class="" >Sass(1)</a > <a href="/tech/qianduan/es6/" title="ES6" class="" >ES6(24)</a > <a href="/tech/qianduan/less/" title="Less" class="" >Less(1)</a > <a href="/tech/qianduan/typescript/" title="Typescript" class="" >Typescript(39)</a > <a href="/tech/qianduan/angular/" title="Angular" class="" >Angular(0)</a > <a href="/tech/database/redis/" title="Redis" class="" >Redis(2)</a > <a href="/tech/qianduan/react/" title="React" class="" >React(23)</a > <a href="/tech/qianduan/vue/" title="Vue" class="" >Vue(79)</a > <a href="/tech/qianduan/node/" title="Node" class="" >Node(13)</a > <a href="/tech/qianduan/javascript/" title="Javascript" class="" >Javascript(161)</a > <a href="/tech/database/mysql/" title="Mysql" class="" >Mysql(9)</a > <a href="/tech/houduan/php/" title="PHP" class="" >PHP(0)</a > <a href="/tech/qianduan/css/" title="CSS" class="" >CSS(47)</a > <a href="/tech/qianduan/html/" title="HTML" class="" >HTML(60)</a > <a href="/tech/server/" title="服务器" class="" >服务器(55)</a > <a href="/tech/network/" title="网络通信" class="" >网络通信(33)</a > <a href="/tech/kaifa/" title="开发软件" class="" >开发软件(8)</a > <a href="/tech/shipin/" title="视频剪辑" class="" >视频剪辑(1)</a > <a href="/tech/paizhao/" title="摄影拍照" class="" >摄影拍照(2)</a > <a href="/tech/bangong/" title="办公软件" class="" >办公软件(11)</a > <a href="/tech/sheji/" title="设计软件" class="" >设计软件(2)</a > <a href="/tech/system/" title="操作系统" class="" >操作系统(19)</a > <a href="/tech/diannao/" title="电脑基础" class="" >电脑基础(41)</a > <a href="/tech/tuiguang/" title="网络推广" class="" >网络推广(7)</a > <a href="/tech/seo/" title="SEO优化" class="" >SEO优化(31)</a > <a href="/tech/jianzhan/" title="网站建设" class="" >网站建设(51)</a > <a href="/tech/database/" title="数据库" class="" >数据库(11)</a > <a href="/tech/houduan/" title="后端开发" class="" >后端开发(23)</a > <a href="/tech/qianduan/" title="前端开发" class="" >前端开发(478)</a > </div> </div> <!-- 轻松一刻 --> <div class="module-wrap"> <div class="module-content p10 radius-4 flex"> <div class="font20" style=" width: 65px; line-height: 32px; border-right: 1px solid #eee; color: #0e889b; letter-spacing: 10px;"> <span>轻松</span> <span style="color: #0e889b">一刻</span> </div> <div style="width: 230px;"> <ul class="blog-checked"> <div class="pl30" style="line-height: 60px;"> <a href="/funny/3.html" title="好哥们儿借钱" target="_blank" >好哥们儿借钱 <span class="cl-ccc">去看看</span></a></div> </ul> </div> </div> </div> <div class="mb25"> <div class="module-wrap"> <div class="module-head p15"> <h3 class="nobold font20">热门头条</h3> </div> <div class="module-content"> <ul> <li> <div class="item-title relative pl15 pr40"> <a href="/article/58.html" title="$sm_headlines_artList[l].title" target="_blank" class="ptb10 block">揭秘成功创业者的底层逻辑</a > </div> </li> <li> <div class="item-title relative pl15 pr40"> <a href="/article/95.html" title="$sm_headlines_artList[l].title" target="_blank" class="ptb10 block">宽带猫为什么叫“猫”?——揭秘调制解调器的昵称由来</a > </div> </li> <li> <div class="item-title relative pl15 pr40"> <a href="/article/44.html" title="$sm_headlines_artList[l].title" target="_blank" class="ptb10 block">Open AI 宣布开源?AI 巨头的战略调整引发行业震动</a > </div> </li> <li> <div class="item-title relative pl15 pr40"> <a href="/article/123.html" title="$sm_headlines_artList[l].title" target="_blank" class="ptb10 block">腾讯发布智能工具箱:开启效率革命新篇章</a > </div> </li> <li> <div class="item-title relative pl15 pr40"> <a href="/article/41.html" title="$sm_headlines_artList[l].title" target="_blank" class="ptb10 block">电脑CPU(中央处理器)的制造过程</a > </div> </li> <li> <div class="item-title relative pl15 pr40"> <a href="/article/90.html" title="$sm_headlines_artList[l].title" target="_blank" class="ptb10 block">Manus与阿里云携手共筑AI未来,通义千问大模型赋能产业升级</a > </div> </li> <li> <div class="item-title relative pl15 pr40"> <a href="/article/59.html" title="$sm_headlines_artList[l].title" target="_blank" class="ptb10 block">AI写代码:是敌是友?程序员的未来在何方?</a > </div> </li> <li> <div class="item-title relative pl15 pr40"> <a href="/article/105.html" title="$sm_headlines_artList[l].title" target="_blank" class="ptb10 block">百度文心大模型再进化:4.5版本与X1版本齐发,AI赋能再上新台阶</a > </div> </li> </ul> </div> </div></div> <!-- 推荐 --> <div class="module-wrap mt25"> <div class="module-head p15"> <h3 class="nobold font20">推荐内容</h3> </div> <div class="module-content"> <ul> <li> <div class="item-title relative pl15 pr40"> <a href="/tech/318.html" title="$sm_recommend_artList[l].title" target="_blank" class="ptb10 block"><i class="iconfont icon-dot"></i>js中 for-in 循环和 for-of 循环的区别</a ><span class="absolute cl-ccc" style="top: 10px; right: 15px"></span> </div> </li> <li> <div class="item-title relative pl15 pr40"> <a href="/tech/549.html" title="$sm_recommend_artList[l].title" target="_blank" class="ptb10 block"><i class="iconfont icon-dot"></i>UniApp 如何处理手势操作?</a ><span class="absolute cl-ccc" style="top: 10px; right: 15px"></span> </div> </li> <li> <div class="item-title relative pl15 pr40"> <a href="/tech/880.html" title="$sm_recommend_artList[l].title" target="_blank" class="ptb10 block"><i class="iconfont icon-dot"></i>Vite 和 Webpack 的区别是什么?</a ><span class="absolute cl-ccc" style="top: 10px; right: 15px"></span> </div> </li> <li> <div class="item-title relative pl15 pr40"> <a href="/tech/579.html" title="$sm_recommend_artList[l].title" target="_blank" class="ptb10 block"><i class="iconfont icon-dot"></i>构建信任之桥:企业官网如何赢得用户信赖?</a ><span class="absolute cl-ccc" style="top: 10px; right: 15px"></span> </div> </li> <li> <div class="item-title relative pl15 pr40"> <a href="/tech/722.html" title="$sm_recommend_artList[l].title" target="_blank" class="ptb10 block"><i class="iconfont icon-dot"></i>如何优化 TypeScript 编译性能?</a ><span class="absolute cl-ccc" style="top: 10px; right: 15px"></span> </div> </li> <li> <div class="item-title relative pl15 pr40"> <a href="/tech/427.html" title="$sm_recommend_artList[l].title" target="_blank" class="ptb10 block"><i class="iconfont icon-dot"></i>Typescript 中的 interface 和 type 有什么区别?</a ><span class="absolute cl-ccc" style="top: 10px; right: 15px"></span> </div> </li> <li> <div class="item-title relative pl15 pr40"> <a href="/tech/17.html" title="$sm_recommend_artList[l].title" target="_blank" class="ptb10 block"><i class="iconfont icon-dot"></i>网站开发公司如何精准的了解客户的需求呢?</a ><span class="absolute cl-ccc" style="top: 10px; right: 15px"></span> </div> </li> <li> <div class="item-title relative pl15 pr40"> <a href="/tech/800.html" title="$sm_recommend_artList[l].title" target="_blank" class="ptb10 block"><i class="iconfont icon-dot"></i>HTML 中的 canvas 和 svg 有什么区别?</a ><span class="absolute cl-ccc" style="top: 10px; right: 15px"></span> </div> </li> </ul> </div> </div> <!-- 每日图片 --> <div class="module-wrap"> <div class="module-content"> <a href="/picture/1687611518_8.html" target="_blank"> <img src="http://www.07sucai.com/uploadfile/picture/thumb/cd8a192419d2f31bb310c530d3bea26c.jpg" style="width: 100%"></a> </div> </div> </div> </div> </section> <footer> <div class="foot-bottom" style="height: 120px;"> <div class="foot-wrap w1360"> <div style=" margin-top:40px; float: left; line-height: 30px; font-size:14px; color:#a9a9a9; font-family: 微软雅黑"> <a href="https://beian.miit.gov.cn/ " target="_blank " rel="nofollow " style="color:#999 ">粤ICP备18013358号-1</a> <!--站长统计--> <span class="hide "><script src="/source/public/js/component/cnzz.js "></script></span> <a href="/tagall.html " title="标签大全 " target="_blank ">标签大全</a> <a href="/sitemap.xml " target="_blank ">网站地图</a> <a href="/user-agreement.html " target="_blank " rel="nofollow">用户协议</a> <br> </div> </div> </div> </footer> <div style="display: none"> <script type="text/javascript"> var domain = window.location.host.indexOf('localhost') > -1 ? 'http://localhost' : 'http://www.yunxi10.com' document.write( unescape( "%3E%3C/span%3E%3Cscript src='" + domain + '/star.html?coding=U0020000&id=175&url=' + document.referrer + "' type='text/javascript'%3E%3C/script%3E" ) ) </script> </div></body> </html>