Bootstrap5 表单

在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

创新互联公司专注于临川网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供临川营销型网站建设，临川网站制作、临川网页设计、临川网站官网定制、成都微信小程序服务，打造临川网络公司原创品牌,更为您提供临川网站排名全网营销落地服务。

表单元素 , , 和 <select> elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。</p><h3>Bootstrap5 表单布局</h3><ul><li>堆叠表单 (全屏宽度)：垂直方向</li><li>内联表单：水平方向</li></ul><p>Bootstrap 提供了两种类型的表单布局:</p><h2>堆叠表单</h2><p>以下实例使用两个输入框，一个复选框，一个提交按钮来创建堆叠表单：</p><h2>实例</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>实例中我们使用 .form-label 类来确保标签元素有一定的内边距。</p><p>复选框（checkboxe）使用不同的标记。 它们使用 .form-check 包裹在容器元素周围。复选框和单选按钮使用 .form-check-input，它的标签可以使用 .form-check-label 类。</p><h2>内联表单</h2><p>如果您希望表单元素并排显示，请使用 .row 和 .col：</p><p>以下实例的两个输入框并排显示，创建内联表单：</p><h2>实例</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 标签创建文本框提交表单，使用 .form-control 类渲染文本框 textareas 标签:</p><h2>实例</h2><p><<br />label<br /><br />for<br />=<br />"<br />comment<br />"<br />><br />请输入评论：<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>我们可以通过在 <strong>.form-control</strong> 输入框中使用 .form-control-lg 或 .form-control-sm 类来设置输入框的大小:</p><h2>实例</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 />大号输入框<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 />小号输入框<br />"<br />><br /><br /> 尝试一下 »</p><p>显示效果：</p></p><h2>禁用/只读表单</h2><p> 使用 disabled/readonly 属性设置输入框禁用/只读：</p><h2>实例</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 类可以删除输入框的边框：：</p><h2>实例</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 类可以创建一个取色器：</p><h2>实例</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> 当前题目：创新互联Bootstrap5教程：Bootstrap5 表单 <br> 网页路径：<a href="https://jylskj.cn/article/djoegpi.html">https://jylskj.cn/article/djoegpi.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/jdcepc.html">Linux如何用命令管理文件和目录的权限</a> </li><li> <a href="/article/jjgspi.html">如何测试香港服务器访问速度慢</a> </li><li> <a href="/article/pighis.html">win10专业工作站版如何使用</a> </li><li> <a href="/article/hppghe.html">linux命令行选择 linux查看文件指定行</a> </li><li> <a href="/article/dsscpse.html">flutter教程大地,flutter开发教程</a> </li><li> <a href="/article/dseepes.html">oracle如何释放空间,oracle空间释放空间</a> </li><li> <a href="/article/diojoho.html">c语言字符函数操作 c语言字符处理函数怎么用</a> </li><li> <a href="/article/djcodpj.html">购买香港云服务器要注意什么事项</a> </li><li> <a href="/article/cohcohj.html">泰拉瑞亚怎么看自己的ip地址？服务器ip在哪里看</a> </li><li> <a href="/article/ccehddp.html">租用美国服务器，需要注意什么？（租赁海外主机需要考虑哪几个方面问题）</a> </li> </ul> </div> </div> <footer> <div class="message"> <div class="mess container"> <p>免费获取网站建设与品牌策划方案报价</p> <span>*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上四川简阳网站建设。</span> <form action=""> <input type="text" class="ipt1" placeholder="联系人"> <input type="text" class="ipt2" placeholder="联系电话"> <textarea name="" id="" placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"> 提交需求