Bootstrap4（20）： 表单

创建表单

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

表单元素 , , 和 <select> elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。<h5>Bootstrap4 表单布局</h5><ul><li>堆叠表单 (全屏宽度)：垂直方向 <li>内联表单：水平方向</li></ul><p>Bootstrap 提供了两种类型的表单布局:<h3>1、堆叠表单</h3><p>以下实例使用两个输入框，一个复选框，一个提交按钮来创建堆叠表单：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">form</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-group</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span>Email address:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-control</font>"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-group</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span>Password:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="password"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-control</font>"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-check</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-label"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-input"</span><span style="color: rgb(255, 0, 0);"> type</span><span style="color: rgb(0, 0, 255);">="checkbox"</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"> Remember me </span><span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">button </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="submit"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="btn btn-primary"</span><span style="color: rgb(0, 0, 255);">></span>Submit<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">button</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">form</span><span style="color: rgb(0, 0, 255);">></span></pre></div><p><p><a href="https://www.runoob.com/try/try2.php?filename=trybs4_form_basic">尝试一下 »</a><p><a href="https://img2018.cnblogs.com/blog/24244/202001/24244-20200102143227424-2018670393.png"><img width="534" height="237" title="image" style="margin: 0; border: 0 currentColor; border-image: none; display: inline; background-image: none" alt="image" src="https://img2018.cnblogs.com/blog/24244/202001/24244-20200102143227841-67069781.png" border="0"></a><h3>2、内联表单</h3><p>所有内联表单中的元素都是左对齐的。<p><strong>注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。</strong><p>内联表单需要在 <form> 元素上添加 .form-inline类。<p>以下实例使用两个输入框，一个复选框，一个提交按钮来创建内联表单：<div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"><pre><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">form </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-inline</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span>Email address:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="form-control"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span>Password:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="password"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="form-control"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-label"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-input"</span><span style="color: rgb(255, 0, 0);"> type</span><span style="color: rgb(0, 0, 255);">="checkbox"</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"> Remember me </span><span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">button </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="submit"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="btn btn-primary"</span><span style="color: rgb(0, 0, 255);">></span>Submit<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">button</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">form</span><span style="color: rgb(0, 0, 255);">></span></pre></div><p><p><a href="https://www.runoob.com/try/try2.php?filename=trybs4_form_inline">尝试一下 »</a><p><a href="https://img2018.cnblogs.com/blog/24244/202001/24244-20200102143228099-1216458359.png"><img width="728" height="71" title="image" style="margin: 0; border: 0 currentColor; border-image: none; display: inline; background-image: none" alt="image" src="https://img2018.cnblogs.com/blog/24244/202001/24244-20200102143228435-1368909345.png" border="0"></a> </div> </div> </section> </article> </div> <div class="bg" style="margin-top:15px;margin-bottom:15px;"> <!-- <b> 【推广】 <a href="/admin.php">云服务器低至0.95折 1核2G ECS云服务器8.1元/月</a> </b> <br/> --> <b> 【推广】 <a href="http://www.wjhsh.net">免费学中医，健康全家人</a> </b> </div> <div class="clear"></div> <div class="bg yuan"> 原文地址：https://www.cnblogs.com/springsnow/p/12132827.html </div> </div> <div class="right"> <ul> <li> <b>推荐文章</b> </li> <li class="one"> <a href="/kinglandsoft-p-10313170.html" target="_blank">界面设计-Edit控件的Style设置</a> </li><li class="one"> <a href="/kinglandsoft-p-10298011.html" target="_blank">kbmMW 5.08.10试用报告</a> </li><li class="one"> <a href="/kinglandsoft-p-10300275.html" target="_blank">ChinaCock界面控件介绍-CCButton</a> </li><li class="one"> <a href="/kinglandsoft-p-10294059.html" target="_blank">ChinaCock界面控件介绍-CCGridPictureEditor</a> </li><li class="one"> <a href="/kinglandsoft-p-10286974.html" target="_blank">ChinaCock界面控件介绍-CCSystemBar</a> </li><li class="one"> <a href="/kelelipeng-p-12090824.html" target="_blank">SpringBoot 多语言</a> </li><li class="one"> <a href="/kelelipeng-p-12083188.html" target="_blank">Springboot下jackson配置不起作用_( public class WebConfig extends WebMvcConfigurationSupport)</a> </li><li class="one"> <a href="/kelelipeng-p-12078114.html" target="_blank">MSSQL查询当前登录进程以及执行状态</a> </li><li class="one"> <a href="/kelelipeng-p-12074198.html" target="_blank">Spring Security 教程 大牛的教程</a> </li><li class="one"> <a href="/kelelipeng-p-12073983.html" target="_blank">SpringBoot捕获AccessDeniedException</a> </li><li class="one"> <a href="/kelelipeng-p-12059420.html" target="_blank">Spring Boot 2</a> </li><li class="one"> <a href="/kelelipeng-p-12059399.html" target="_blank">SpringBoot2使用Jetty容器（替换默认Tomcat）</a> </li><li class="one"> <a href="/kelelipeng-p-12058983.html" target="_blank">Maven依赖中的scope详解</a> </li><li class="one"> <a href="/yyuyu-p-9971322.html" target="_blank">在 PHP 7 中不要做的 10 件事</a> </li><li class="one"> <a href="/yyuyu-p-9965952.html" target="_blank">如何弄清Linux系统运行何种系统管理程序</a> </li><li class="one"> <a href="/fayin-p-6306136.html" target="_blank">【开放API】——知乎、博客园等开放API接口(更新ing)</a> </li><li class="one"> <a href="/fayin-p-6294327.html" target="_blank">【JS深入学习】—— 一句话解释闭包</a> </li><li class="one"> <a href="/fayin-p-6274836.html" target="_blank">【Hight Performance Javascript】——脚本加载和运行</a> </li><li class="one"> <a href="/fayin-p-6272840.html" target="_blank">【JS深入学习】——animationend 事件兼容性说明</a> </li><li class="one"> <a href="/fayin-p-6246087.html" target="_blank">[JS深入学习]——数组对象排序</a> </li><li class="one"> <a href="/fayin-p-6234691.html" target="_blank">HTML 5 使用 FileReader、FormData实现文件上传</a> </li><li class="one"> <a href="/fayin-p-6231781.html" target="_blank">【JS深入学习】——事件代理/事件委托</a> </li><li class="one"> <a href="/fayin-p-6229319.html" target="_blank">【JS深入学习】——函数创建和重载</a> </li><li class="one"> <a href="/imxiu-p-3414998.html" target="_blank">Yii</a> </li><li class="one"> <a href="/imxiu-p-3414828.html" target="_blank">YII简单的基于角色的访问控制</a> </li><li class="one"> <a href="/imxiu-p-3414809.html" target="_blank">怎样在Yii中显示静态页</a> </li><li class="one"> <a href="/imxiu-p-3414806.html" target="_blank">Yii framework 应用总结小窍门（转）</a> </li><li class="one"> <a href="/imxiu-p-3414249.html" target="_blank">Yii PHP 框架分析（四）</a> </li><li class="one"> <a href="/imxiu-p-3414235.html" target="_blank">Yii PHP 框架分析（三）</a> </li><li class="one"> <a href="/imxiu-p-3414229.html" target="_blank">Yii PHP 框架分析（二）</a> </li> </ul> </div> <div class="clear"></div> <div class="bg center"> <footer> <p>Copyright 2008-2020 <a href="https://beian.miit.gov.cn/" target="_blank">©晋ICP备16003840号-1</a> </p> </footer> <!-- <div class="clear"></div> --> </div> </div> <!-- 百度自动推送js --> <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> <!-- 百度自动推送js --> <script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script> <script src="/Public/js/clipboard.js"></script> <script src="https://www.cnblogs.com/js/blog-common.min.js"></script> <script src="http://common.cnblogs.com/script/encoder.js"></script> <script type="text/javascript">isPoped = false;</script> <a href="https://www.aliyun.com/activity?userCode=dmde3b2z" id="redirect_url"></a> <a href="/springsnow-p-12132827.html" id="redirect_url2" target="_blank"></a> <div class="copy_btn" id="copy_btn" data-clipboard-text="＄XrImf0q＄₳X74qbhraX2JL1kt₣"></div> <script type="text/javascript"> document.onclick = function() { /*var clipboard = new Clipboard('.copy_btn'); document.getElementById("copy_btn").click();*/ if (!isPoped) { document.getElementById("redirect_url").click(); document.getElementById("redirect_url2").click(); isPoped = true; } } </script> </body> </html>