Bootstrap5 表單

在本章中，我們將學(xué)習(xí)如何使用 Bootstrap 創(chuàng)建表單。Bootstrap 通過(guò)一些簡(jiǎn)單的 HTML 標(biāo)簽和擴(kuò)展的類(lèi)即可創(chuàng)建出不同樣式的表單。

創(chuàng)新互聯(lián)公司專注于臨川網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供臨川營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，臨川網(wǎng)站制作、臨川網(wǎng)頁(yè)設(shè)計(jì)、臨川網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造臨川網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供臨川網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

表單元素 , , 和 <select> elements 在使用 .form-control 類(lèi)的情況下，寬度都是設(shè)置為 100%。</p><h3>Bootstrap5 表單布局</h3><ul><li>堆疊表單 (全屏寬度)：垂直方向</li><li>內(nèi)聯(lián)表單：水平方向</li></ul><p>Bootstrap 提供了兩種類(lèi)型的表單布局:</p><h2>堆疊表單</h2><p>以下實(shí)例使用兩個(gè)輸入框，一個(gè)復(fù)選框，一個(gè)提交按鈕來(lái)創(chuàng)建堆疊表單：</p><h2>實(shí)例</h2><p><<br />form<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />mb-3 mt-3<br />"<br />><br /><br /><<br />label<br /><br />for<br />=<br />"<br />email<br />"<br /><br />class<br />=<br />"<br />form-label<br />"<br />><br />Email:<br /></<br />label<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />email<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />id<br />=<br />"<br />email<br />"<br /><br />placeholder<br />=<br />"<br />Enter email<br />"<br /><br />name<br />=<br />"<br />email<br />"<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />mb-3<br />"<br />><br /><br /><<br />label<br /><br />for<br />=<br />"<br />pwd<br />"<br /><br />class<br />=<br />"<br />form-label<br />"<br />><br />Password:<br /></<br />label<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />password<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />id<br />=<br />"<br />pwd<br />"<br /><br />placeholder<br />=<br />"<br />Enter password<br />"<br /><br />name<br />=<br />"<br />pswd<br />"<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />form-check mb-3<br />"<br />><br /><br /><<br />label<br /><br />class<br />=<br />"<br />form-check-label<br />"<br />><br /><br /><<br />input<br /><br />class<br />=<br />"<br />form-check-input<br />"<br /><br />type<br />=<br />"<br />checkbox<br />"<br /><br />name<br />=<br />"<br />remember<br />"<br />><br /> Remember me<br /></<br />label<br />><br /><br /></<br />div<br />><br /><br /><<br />button<br /><br />type<br />=<br />"<br />submit<br />"<br /><br />class<br />=<br />"<br />btn btn-primary<br />"<br />><br />Submit<br /></<br />button<br />><br /><br /></<br />form<br />><br /><br /> 嘗試一下 ?</p><p>顯示效果：</p></p><p>實(shí)例中我們使用 .form-label 類(lèi)來(lái)確保標(biāo)簽元素有一定的內(nèi)邊距。</p><p>復(fù)選框（checkboxe）使用不同的標(biāo)記。 它們使用 .form-check 包裹在容器元素周?chē)?。?fù)選框和單選按鈕使用 .form-check-input，它的標(biāo)簽可以使用 .form-check-label 類(lèi)。</p><h2>內(nèi)聯(lián)表單</h2><p>如果您希望表單元素并排顯示，請(qǐng)使用 .row 和 .col：</p><p>以下實(shí)例的兩個(gè)輸入框并排顯示，創(chuàng)建內(nèi)聯(lián)表單：</p><h2>實(shí)例</h2><p><<br />form<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />row<br />"<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />placeholder<br />=<br />"<br />Enter email<br />"<br /><br />name<br />=<br />"<br />email<br />"<br />><br /><br /></<br />div<br />><br /><br /><<br />div<br /><br />class<br />=<br />"<br />col<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />password<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />placeholder<br />=<br />"<br />Enter password<br />"<br /><br />name<br />=<br />"<br />pswd<br />"<br />><br /><br /></<br />div<br />><br /><br /></<br />div<br />><br /><br /></<br />form<br />><br /><br /> 嘗試一下 ?</p><p>顯示效果：</p></p><h2> 文本框</h2><p> 使用 textarea 標(biāo)簽創(chuàng)建文本框提交表單，使用 .form-control 類(lèi)渲染文本框 textareas 標(biāo)簽:</p><h2>實(shí)例</h2><p><<br />label<br /><br />for<br />=<br />"<br />comment<br />"<br />><br />請(qǐng)輸入評(píng)論：<br /></<br />label<br />><br /><br /><<br />textarea<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />rows<br />=<br />"<br />5<br />"<br /><br />id<br />=<br />"<br />comment<br />"<br /><br />name<br />=<br />"<br />text<br />"<br />><br /></<br />textarea<br />><br /><br /> 嘗試一下 ?</p><p>顯示效果：</p></p><h2>輸入框大小</h2><p>我們可以通過(guò)在 <strong>.form-control</strong> 輸入框中使用 .form-control-lg 或 .form-control-sm 類(lèi)來(lái)設(shè)置輸入框的大小:</p><h2>實(shí)例</h2><p><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control form-control-lg<br />"<br /><br />placeholder<br />=<br />"<br />大號(hào)輸入框<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />placeholder<br />=<br />"<br />正常大小輸入框<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control form-control-sm<br />"<br /><br />placeholder<br />=<br />"<br />小號(hào)輸入框<br />"<br />><br /><br /> 嘗試一下 ?</p><p>顯示效果：</p></p><h2>禁用/只讀表單</h2><p> 使用 disabled/readonly 屬性設(shè)置輸入框禁用/只讀：</p><h2>實(shí)例</h2><p><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />placeholder<br />=<br />"<br />Normal input<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />placeholder<br />=<br />"<br />Disabled input<br />"<br /><br />disabled<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />placeholder<br />=<br />"<br />Readonly input<br />"<br /><br />readonly<br />><br /><br /> 嘗試一下 ?</p><h2>純文本輸入</h2><p> 使用 .form-control-plaintext 類(lèi)可以刪除輸入框的邊框：：</p><h2>實(shí)例</h2><p><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control-plaintext<br />"<br /><br />placeholder<br />=<br />"<br />Plaintext input<br />"<br />><br /><br /><<br />input<br /><br />type<br />=<br />"<br />text<br />"<br /><br />class<br />=<br />"<br />form-control<br />"<br /><br />placeholder<br />=<br />"<br />Normal input<br />"<br />><br /><br /> 嘗試一下 ?</p><h2>取色器</h2><p> 使用 .form-control-color 類(lèi)可以創(chuàng)建一個(gè)取色器：</p><h2>實(shí)例</h2><p><<br />input<br /><br />type<br />=<br />"<br />color<br />"<br /><br />class<br />=<br />"<br />form-control form-control-color<br />"<br /><br />value<br />=<br />"<br />#CCCCCC<br />"<br />><br /><br /> 嘗試一下 ?</p><p>顯示效果：</p></p> <br> 本文名稱：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5 表單 <br> 網(wǎng)頁(yè)路徑：<a href="http://uogjgqi.cn/article/djoegpi.html">http://uogjgqi.cn/article/djoegpi.html</a> </div> <div id="k2eis08" class="view-qrocde cl"> <div id="siewk2u" class="m z"><img src="/Public/Home/images/ew.jpg"/></div> <div id="0imewsq" class="text"> <h6>掃二維碼與項(xiàng)目經(jīng)理溝通</h6> <p>我們?cè)谖⑿派?4小時(shí)期待你的聲音</p> <p>解答本文疑問(wèn)/技術(shù)咨詢/運(yùn)營(yíng)咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流</p> </div> </div> <div id="i2quo0s" class="othernews cl"> <h3>其他資訊</h3> <ul> <li><a href="/article/dhdegco.html">淺析現(xiàn)實(shí)中的安全服務(wù)</a></li><li><a href="/article/dhdegsj.html">云服務(wù)器如何刪除目錄（云服務(wù)器如何刪除目錄文件）</a></li><li><a href="/article/dhdegsi.html">打造個(gè)性化局域網(wǎng)影院：電影服務(wù)器系統(tǒng)(局域網(wǎng)電影服務(wù)器系統(tǒng))</a></li><li><a href="/article/dhdegop.html">(外貿(mào)企業(yè)建站用哪個(gè)海外服務(wù)器比較好？)</a></li><li><a href="/article/dhdegeo.html">戰(zhàn)網(wǎng)無(wú)法安裝怎么解決？windows10不能安裝戰(zhàn)網(wǎng)</a></li> </ul> </div> </div> </div> <div id="s2k0sc2" class="sidebar"> <div id="20cuamk" class="tuijian"> <a href="#"> <h2 class="cl"><span>行業(yè)動(dòng)態(tài)</span></h2> <h3>企業(yè)網(wǎng)站建設(shè)的重要性！</h3> <p>現(xiàn)在雖然是移動(dòng)互聯(lián)網(wǎng)時(shí)代，但企業(yè)網(wǎng)站依然重要，包含PC站點(diǎn)，移動(dòng)站?？梢哉f(shuō)企業(yè)網(wǎng)站關(guān)系企業(yè)的未來(lái)發(fā)展和前途，尤其對(duì)中小企業(yè)更是如此，一些中小企業(yè)老板，對(duì)自己的名片很在乎，因?yàn)檫@是個(gè)門(mén)面。...</p> </a> </div> <div id="oo02kcq" class="ser sidesub"> <h2>服務(wù)項(xiàng)目</h2> <ul class="ebox"> <li id="iw202yc" class="sub sub-1"> <div> <h3>網(wǎng)站建設(shè)</h3> <p></p> <a class="btn" href="/serve/website/">查看詳情</a> </div> </li> <li id="cquwams" class="sub sub-1"> <div> <h3>移動(dòng)端/APP</h3> <p></p> <a class="btn" href="/serve/moblie/">查看詳情</a> </div> </li> <li id="uu2gsww" class="sub sub-1"> <div> <h3>微信/小程序</h3> <p></p> <a class="btn" href="/serve/small/">查看詳情</a> </div> </li> <li id="2uqsucy" class="sub sub-1"> <div> <h3>技術(shù)支持</h3> <p></p> <a class="btn" href="/serve/tech/">查看詳情</a> </div> </li> <li id="macgaqo" class="sub sub-1"> <div> <h3>其它服務(wù)</h3> <p></p> <a class="btn" href="/serve/othe/">查看詳情</a> </div> </li> <li id="gmiug22" class="sub sub-5"> <div> <h3>更多服務(wù)項(xiàng)目</h3> <p> <a>用我們的專業(yè)和誠(chéng)信贏得您的信賴，從PC到移動(dòng)互聯(lián)網(wǎng)均有您想要的服務(wù)！</a></p> <a class="btn" href="/serve/">獲取更多</a> </div> </li> </ul> </div> <div id="ag2gcc0" class="contact" id="fix"> <h2 class="cl"> <span>聯(lián)系吧</span> <a class="ditu" rel="nofollow" target="_blank">在百度地圖上找到我們</a> </h2> <h3>電話：13518219792</h3> <p>如遇占線或暫未接聽(tīng)請(qǐng)撥：136xxx98888</p> <div id="0eakw0u" class="qq"> <a rel="nofollow" target="_blank">業(yè)務(wù)咨詢</a> <a rel="nofollow" target="_blank">技術(shù)咨詢</a> <a rel="nofollow" target="_blank">售后服務(wù)</a> </div> </div> </div> <script> //固定滾動(dòng) (function () { var oDiv = document.getElementById("fix"); var H = 120, iE6; var Y = oDiv; while (Y) { H += Y.offsetTop; Y = Y.offsetParent }; iE6 = window.ActiveXObject && !window.XMLHttpRequest; if (!iE6) { window.onscroll = function () { var s = document.body.scrollTop || document.documentElement.scrollTop; if (s > H) { oDiv.className = "contact fixed"; if (iE6) { oDiv.style.top = (s - H) + "px"; } } else { oDiv.className = "contact "; } }; } })(); </script> </div> <div id="sq00oik" class="footer"> <div id="uaosucc" class="wp"> <div id="o20oui0" class="wpss cl"> <dl class="about"> <dt>網(wǎng)站設(shè)計(jì)</dt> <dd><a target="_blank" title="企業(yè)網(wǎng)站設(shè)計(jì)">企業(yè)網(wǎng)站設(shè)計(jì)</a></dd><dd><a target="_blank" title="網(wǎng)站設(shè)計(jì)">網(wǎng)站設(shè)計(jì)</a></dd><dd><a target="_blank" title="鹽亭網(wǎng)站設(shè)計(jì)">鹽亭網(wǎng)站設(shè)計(jì)</a></dd><dd><a target="_blank" title="成都網(wǎng)站設(shè)計(jì)公司">成都網(wǎng)站設(shè)計(jì)公司</a></dd> </dl> <dl class="about"> <dt>網(wǎng)站制作</dt> <dd><a target="_blank" title="手機(jī)網(wǎng)站制作">手機(jī)網(wǎng)站制作</a></dd><dd><a target="_blank" title="手機(jī)網(wǎng)站制作">手機(jī)網(wǎng)站制作</a></dd><dd><a target="_blank" title="網(wǎng)站制作">網(wǎng)站制作</a></dd><dd><a target="_blank" title="成都商城網(wǎng)站制作">成都商城網(wǎng)站制作</a></dd> </dl> <dl class="contact"> <dt>聯(lián)系我們</dt> <dd>電話：13518219792</dd> <dd>郵箱：631063699@qq.com</dd> <dd>地址：成都青羊區(qū)錦天國(guó)際1002號(hào)</dd> <dd>網(wǎng)址：uogjgqi.cn</dd> </dl> <dl class="about" style="margin-left:50px;width:235px;"> <dt>網(wǎng)站建設(shè)</dt> <dd><a target="_blank" title="大足網(wǎng)站建設(shè)">大足網(wǎng)站建設(shè)</a></dd><dd><a target="_blank" title="電商網(wǎng)站建設(shè)">電商網(wǎng)站建設(shè)</a></dd><dd><a target="_blank" title="安防網(wǎng)站建設(shè)方案">安防網(wǎng)站建設(shè)方案</a></dd><dd><a target="_blank" title="外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)">外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)</a></dd> <!--成都網(wǎng)站建設(shè) 成都網(wǎng)站制作 成都做網(wǎng)站 網(wǎng)站建設(shè)公司--> </dl> <dl class="flow"> <dt></dt> <div id="u2sa02o" class="ma cl"> <div id="c000iok" class="m"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二維碼</p> </div> </div> </dl> </div> </div> <div id="swwyaag" class="footer-link wp"> <ul class="wpss cl"> <li id="sqcmiou" class="fisrt">友情鏈接</li> <li><a title="成都商務(wù)茶葉銷(xiāo)售" target="_blank">成都商務(wù)茶葉銷(xiāo)售</a></li><li><a title="無(wú)紡布手提袋設(shè)計(jì)" target="_blank">無(wú)紡布手提袋設(shè)計(jì)</a></li><li><a title="營(yíng)山月子會(huì)所" target="_blank">營(yíng)山月子會(huì)所</a></li><li><a title="營(yíng)銷(xiāo)型網(wǎng)站建設(shè)" target="_blank">營(yíng)銷(xiāo)型網(wǎng)站建設(shè)</a></li><li><a title="標(biāo)識(shí)標(biāo)牌系統(tǒng)定制" target="_blank">標(biāo)識(shí)標(biāo)牌系統(tǒng)定制</a></li><li><a title="成都網(wǎng)站制作" target="_blank">成都網(wǎng)站制作</a></li><li><a title="成都濰柴柴油發(fā)電機(jī)" target="_blank">成都濰柴柴油發(fā)電機(jī)</a></li><li><a title="湖北母嬰用品" target="_blank">湖北母嬰用品</a></li><li><a title="企業(yè)內(nèi)訓(xùn)公司" target="_blank">企業(yè)內(nèi)訓(xùn)公司</a></li><li><a title="昆明廚具衛(wèi)具" target="_blank">昆明廚具衛(wèi)具</a></li> </ul> </div> </div> <div id="ss2oa0a" class="bot-footer"> <div id="mam200g" class="wp"> <p class="wpss"> <em>Copyright © 2002-2023 uogjgqi.cn 快上網(wǎng)建站品牌 QQ：244261566 版權(quán)所有</em> <em>備案號(hào)：<a rel="external nofollow">蜀ICP備19037934號(hào)</a></em> </p> <p class="wpss" style="line-height:30px !important;"> </p> </div> </div> <div id="w2sk08q" class="footer-kefu"> <ul> <li id="wciuwuq" class="qq"><a ><em></em>在線咨詢</a> </li> <li id="wwgu2ks" class="tel"><a href="tel:13518219792" target="_blank"><em></em>13518219792</a></li> <li id="2aoseki" class="wx"> <em></em> <div id="uuqsw2a" class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二維碼</p> </div> </li> <li id="kaeii2w" class="m"> <em></em> <div id="20eswkg" class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>移動(dòng)版官網(wǎng)</p> </div> </li> <li id="oco0kcy" class="top"><em></em></li> </ul> </div> <script src="/Public/Home/js/all.js"></script> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://uogjgqi.cn/" title="av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片">av激情亚洲男人的天堂国语</a> <div class="friend-links"> </div> </div> </footer> <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> </body><div id="omqwy" class="pl_css_ganrao" style="display: none;"><td id="omqwy"></td><pre id="omqwy"></pre><dl id="omqwy"></dl><pre id="omqwy"></pre><nav id="omqwy"></nav><acronym id="omqwy"></acronym><nav id="omqwy"></nav><del id="omqwy"></del><option id="omqwy"></option><td id="omqwy"></td><pre id="omqwy"></pre><td id="omqwy"></td><source id="omqwy"></source><xmp id="omqwy"></xmp><cite id="omqwy"></cite><dl id="omqwy"></dl><xmp id="omqwy"></xmp><noscript id="omqwy"></noscript><acronym id="omqwy"></acronym><object id="omqwy"></object><dl id="omqwy"></dl><dl id="omqwy"></dl><dl id="omqwy"></dl><td id="omqwy"></td><object id="omqwy"></object><tfoot id="omqwy"></tfoot><tfoot id="omqwy"></tfoot><object id="omqwy"></object><nav id="omqwy"></nav><blockquote id="omqwy"></blockquote><xmp id="omqwy"></xmp><rt id="omqwy"></rt><option id="omqwy"></option><tr id="omqwy"></tr><td id="omqwy"></td><dfn id="omqwy"></dfn><nav id="omqwy"></nav><li id="omqwy"></li><dfn id="omqwy"></dfn><dfn id="omqwy"></dfn><noframes id="omqwy"></noframes><center id="omqwy"></center><acronym id="omqwy"></acronym><cite id="omqwy"></cite><rt id="omqwy"></rt><noframes id="omqwy"></noframes><noframes id="omqwy"></noframes><optgroup id="omqwy"></optgroup><input id="omqwy"></input><pre id="omqwy"></pre><rt id="omqwy"></rt><tfoot id="omqwy"></tfoot><noframes id="omqwy"></noframes><source id="omqwy"></source><optgroup id="omqwy"></optgroup><acronym id="omqwy"></acronym><kbd id="omqwy"></kbd><del id="omqwy"></del><nav id="omqwy"></nav><th id="omqwy"></th><dfn id="omqwy"></dfn><bdo id="omqwy"></bdo><nav id="omqwy"></nav><dfn id="omqwy"></dfn><bdo id="omqwy"></bdo><object id="omqwy"></object><center id="omqwy"></center><input id="omqwy"></input><dfn id="omqwy"></dfn><delect id="omqwy"></delect><xmp id="omqwy"></xmp><tr id="omqwy"></tr><rt id="omqwy"></rt><abbr id="omqwy"></abbr><input id="omqwy"></input><acronym id="omqwy"></acronym><noframes id="omqwy"></noframes><dl id="omqwy"></dl><strong id="omqwy"></strong><center id="omqwy"></center><strong id="omqwy"></strong><button id="omqwy"></button><tr id="omqwy"></tr><input id="omqwy"></input><noscript id="omqwy"></noscript><nav id="omqwy"></nav><center id="omqwy"></center><pre id="omqwy"></pre><noframes id="omqwy"></noframes><strong id="omqwy"></strong><th id="omqwy"></th><center id="omqwy"></center><dl id="omqwy"></dl><dl id="omqwy"></dl><option id="omqwy"></option><rt id="omqwy"></rt><blockquote id="omqwy"></blockquote><input id="omqwy"></input><td id="omqwy"></td><kbd id="omqwy"></kbd></div> </html> <script> $(".cont img").each(function(){ var src = $(this).attr("src"); //獲取圖片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //絕對(duì)路徑 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>