如何在Bootstrap CSS中创建Web表单[示例]

从调查到运送表格到注册表格和测验，网络形态无处不在互联网上。他们掌握了无数原因。您可以使用Web表单将访问者转换为潜在的领导，并跟踪现有客户的个人信息，购买，反馈和调查响应。

如何将此交互元素添加到您的Web设计上取决于您如何构建您的网站。

例如，如果你在WordPress上创建一个网站，那么你可以安装一个插件来添加表单到你的网站。的HubSpot的WordPress插件例如，使用直观的拖放构建器可以轻松地在网站上创建表单。此外，这些形式将自动与Hubspot CRM同步，以便更好地管理您的联系人。

如果您正在创建一个网站Bootstrap CSS.另一方面，您可以使用表单类来快速添加表单。我们将在这篇文章中详细介绍此过程。让我们开始吧。

引导形式CSS

感谢Bootstrap中包含的预先设计的模板，为您的站点创建表单很容易。可以使用任何预定义的表单样式，如引导程序的文档，快速添加您网站上的表格。

您只需要将必要的代码添加到index.html文件的主体部分。例如，您希望添加一个表单来捕获客户的帐户信息，以便他们下次能够更快、更容易地登录到您的站点。它可能看起来像这样:

来源

这是您使用的代码：


< >形式
<标签= " exampleInputEmail1 " >电子邮件地址> < /标签
密码
<输入类型=“checkbox”class =“form-check-input”id =“exampleCheck1”>
记住我的“form-check-label”>

请注意，您有

元素的打开和关闭标签。而且，在这些标签中，您拥有各种HTML元素，包括分隔符，标签，输入和按钮，所有这些都在一起构成表单。对于这些工作，他们需要在Bootstrap中使用正确的表单类进行样式。

我们可以在上面的片段三个集装箱中看到这些中的一些行动。让我们分解每个元素和样式。

看到前两个元素了吗?它们使用.form-control类进行样式设置，以便它们跨越页面的整个宽度并具有响应性。在前端，用户将在这些地方输入他们的电子邮件地址和密码。

这些<输入>元素之前由元素之前，因此用户知道要输入的信息以及框中的哪些信息。在一起，每个<标签>和<输入>对包装在自己的容器中，或

元素，它与.form-group类一起打造。

第三个容器使用.form-group类和.form-check类进行样式设置，因为它包含一个复选框。要创建这个复选框，元素采用.form-check-input类的样式(而不是应用于其他元素的.form-control类)。最后，元素位于元素之后，并使用.form.check进行样式设置。标签类。

最后，还包含一个按钮元素。这需要使用按钮类而不是表单类进行样式设置。

现在我们已经了解了如何在Bootstrap中构建基本表单，接下来让我们看看如何在下面的一些示例中修改和扩展表单类。

引导表单CSS示例

以下是展示Bootstrap形式样式范围的示例。每个示例都会显示不同的所需类，表单布局等。

我会使用的W3Schools在线代码编辑器要创建示例，因此您可以单击任何源链接以查看示例后面的完整代码片段。

Bootstrap选择示例

假设您想在现有表单中添加一个下拉菜单。然后在HTML中添加以下内容，就在包含复选框的

之前。


>你是怎么知道我们的?
<选择class =“form-control”id =“examplyformcontrolselect1”>
<选项>选择一个
<选项>广告
<选项>朋友
<选项>传单
<选项>电视
<选项>博客

结果:

来源

Bootstrap文本区域示例

假设你想问用户同样的问题，“你是怎么知道我们的?”但是，与其提供有限的答案选择，还不如包含一个文本区域，这样他们就可以写任何他们想写的内容。然后在HTML中添加以下内容，就在包含复选框的

之前。


你是怎么知道我们的?
 </ textarea></p><p></ div></p><p></p></code><p><code class="html"></code></p></pre><p></p><p>结果:</p>
               <div>
                <img src="//www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-4.png?width=529&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-4.png" alt="引导表单与文本区域的例子" width="529" style="width: 529px; display: block; margin: 0px auto;" srcset="//www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-4.png?width=265&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-4.png 265w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-4.png?width=529&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-4.png 529w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-4.png?width=794&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-4.png 794w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-4.png?width=1058&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-4.png 1058w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-4.png?width=1323&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-4.png 1323w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-4.png?width=1587&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-4.png 1587w" sizes="(max-width: 529px) 100vw, 529px">
               </div><p style="font-size: 13px; text-align: center;"><a href="https://www.w3schools.com/code/tryit.asp?filename=GF0X0LQPYGAF" rel="noopener" target="_blank" style="font-style: italic;">来源</a></p><h3>Bootstrap附件示例</h3><p>如果您想在提交表单之前让用户上传文件，那么您可以使用<input>元素并使用.form-Control-File类进行样式。您将与<label>元素配对并将其包装在与.form-group类中的<div>中。这是您在按钮之前添加的代码。</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><div类=“form-group”></p><p><label for =“exampleformcontrolfile1”>上载恢复和求职信</ label></p><p><输入类型=“file”class =“form-control-file”id =“examplyformcontrolfile1”></p><p></ div></p><p></p></code><p><code class="html"></code></p></pre><p></p><p>结果:</p>
               <div>
                <img src="//www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D.png?width=522&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D.png" alt="带附件示例的引导表单" width="522" style="width: 522px; display: block; margin: 0px auto;" srcset="//www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D.png?width=261&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D.png 261w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D.png?width=522&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D.png 522w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D.png?width=783&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D.png 783w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D.png?width=1044&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D.png 1044w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D.png?width=1305&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D.png 1305w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D.png?width=1566&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D.png 1566w" sizes="(max-width: 522px) 100vw, 522px">
               </div><p style="font-size: 13px; text-align: center;"><a href="https://www.w3schools.com/code/tryit.asp?filename=GF0XF1ZQGXC0" rel="noopener" target="_blank" style="font-style: italic;">来源</a></p><h3>引导表单网格示例</h3><p>要构建更复杂的表单，您可以使用Bootstrap的网格类。例如，假设您希望电子邮件地址和密码的输入字段是并排堆叠的其余元素。您还要删除输入字段上方的标签，而是在字段中包含该文本。然后，您可以使用以下代码替换前两个<div>容器：</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><div类=“行”></p><p><div类=“col”></p><p><输入类型=“text”class =“form-control”占位符=“电子邮件地址”></p><p></ div></p><p><div类=“col”></p><p><input type="text" class="form-control" placeholder="Password"></p><p></ div></p><p></ div></p><p></p></code><p><code class="html"></code></p></pre><p></p><p>结果:</p>
               <div>
                <img src="//www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.png?width=524&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.png" alt="引导网格形式的例子" width="524" style="width: 524px; display: block; margin: 0px auto;" srcset="//www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.png?width=262&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.png 262w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.png?width=524&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.png 524w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.png?width=786&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.png 786w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.png?width=1048&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.png 1048w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.png?width=1310&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.png 1310w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.png?width=1572&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.png 1572w" sizes="(max-width: 524px) 100vw, 524px">
               </div><p style="font-size: 13px; text-align: center;"><a href="https://www.w3schools.com/code/tryit.asp?filename=GF0XYGM7W8PA" rel="noopener" target="_blank" style="font-style: italic;">来源</a></p><p><strong>请注意</strong>：我在CSS中添加了一些边缘设置，使布局看起来更好。您可以通过单击源链接来查看该代码。</p><h3>引导内联表单示例</h3><p>如果您正在寻找较少的空间，那么您可能希望创建一个内联表单，其中所有元素都在一行。您可以通过将.form-inline类添加到<form>元素和某些大小特定列类。</p><p>你会看到整个代码中都添加了mb-2，例如，在Bootstrap中将这些元素的margin-bottom设置为.5rem。同样地，mr-sm-2将这些元素的右边距设为。5雷姆，断点设为小。</p><p>让我们使用上面的示例并将其转换为内联形式。这是代码:</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><form class =“form-inline”></p><p><label class = for =“inlineforminputname2”> name </ label></p><p><输入类型=“text”class =“form-control mb-2 mr-sm-2”Id =“InlineFormInputEmail”占位符=“电子邮件地址”></p><p><label class = for“sr-only”for =“InlineFormInputgroupusername2”>电子邮件地址</ label></p><p><div类=“输入组MB-2 MR-SM-2”></p><p><输入类型=“text”class =“form-control”id =“InlineFormInputPassword”占位符=“密码”></p><p></ div></p><p><div类=“form-check mb-2 mr-sm-2”></p><p><输入class =“form-check-input”类型=“checkbox”id =“InlineFormcheck”></p><p><label class = for“form-check-label”for =“InlineFormCheck”></p><p>记住账号</p><p></ label></p><p></ div></p><p><按钮类型=“提交”类=“BTN BTN-MB-2”>提交</按钮></p><p></ form></p><p><br><br></p></code><p><code class="html"></code></p></pre><p></p><p>结果:</p>
               <div>
                <img src="//www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-3.png?width=600&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-3.png" alt="引导内联表单示例" width="600" style="width: 600px; display: block; margin: 0px auto;" srcset="//www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-3.png?width=300&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-3.png 300w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-3.png?width=600&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-3.png 600w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-3.png?width=900&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-3.png 900w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-3.png?width=1200&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-3.png 1200w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-3.png?width=1500&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-3.png 1500w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-3.png?width=1800&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-3.png 1800w" sizes="(max-width: 600px) 100vw, 600px">
               </div><p style="font-size: 13px; text-align: center;"><a href="https://www.w3schools.com/code/tryit.asp?filename=GF0Y9JYPWXR1" rel="noopener" target="_blank" style="font-style: italic;">来源</a></p><p><strong>笔记</strong>：如果您使用的设备或视口宽于576像素，则元素将堆叠在一起。例如，如果我将屏幕缩小到400px，则表单将如下所示：</p>
               <div>
                <img src="//www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-5.png?width=469&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-5.png" alt="移动设备上的Boostrap内联表单将恢复为垂直堆栈（默认）" width="469" style="width: 469px; display: block; margin: 0px auto;" srcset="//www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-5.png?width=235&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-5.png 235w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-5.png?width=469&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-5.png 469w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-5.png?width=704&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-5.png 704w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-5.png?width=938&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-5.png 938w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-5.png?width=1173&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-5.png 1173w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-5.png?width=1407&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-5.png 1407w" sizes="(max-width: 469px) 100vw, 469px">
               </div><h3>Bootstrap表单验证示例</h3><p>假设你想要在用户填写表单时加入可操作的反馈，比如提醒他们在提交前忘记勾选“记住我”框。可以通过对Bootstrap <form>元素应用验证类来实现。</p><p>例如，.was验证的类将让用户知道在提交之前必须填写或检查的字段，而.NEEDS验证类仅在尝试提交后缺少用户是否缺少字段。</p><p>无论您使用的类，已填写的输入字段都会有一个绿色边框，而尚未填写的输入字段将具有红色边框。如果您想准确地告诉用户缺少哪些信息（以及已成功提供的信息），那么您甚至可以添加.valid反馈和.Invalid-Feedback消息。</p><p>在下面的示例中，让我们使用。肠道验证类，以便用户将知道是否缺少任何东西。</p><p>这是您需要在HTML的<body>中添加的HTML。</p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><form action =“/ action_page.php”class =“需要验证”Novalidate></p><p><div类=“form-group”></p><p><标签= "电子邮件" >电子邮件地址> < /标签</p><p><输入类型=“text”class =“form-control”id =“uname”placeholder =“输入电子邮件地址”名称=“uname”必填></p><p><div class="valid-feedback">感谢您输入一个有效的电子邮件地址</p><p><div class="invalid-feedback">请输入您的电子邮件地址</p><p></ div></p><p><div类=“form-group”></p><p><标签= " pwd " >密码> < /标签</p><p><输入类型=“password”class =“form-control”id =“pwd”placeholder =“输入密码”名称=“pswd”必填></p><p><div类=“有效反馈”>感谢您输入有效密码。</ div></p><p><div类=“无效反馈”>请输入您的密码。</ div></p><p></ div></p><p><div类=“form-group form-check”></p><p><标签类= " form-check-label " ></p><p><输入class =“form-check-input”类型=“checkbox”名称=“记住”必填>记住我</p><p><div类=“无效 - 反馈”>请选中此框以继续。</ div></p><p></ label></p><p></ div></p><p><button type="submit" class="btn btn-primary"></p><p></ form></p><p></p></code><p><code class="html"></code></p></pre><p></p><p>下面是你需要在HTML的<body>中添加的初始JavaScript。</p><p></p><pre class="syntax"><code class="js"><p></p><p></p><p><script></p><p>//如果存在无效字段，则禁用表单提交</p><p>（功能（） {</p><p>使用严格的;</p><p>窗口。addEventListener(“负载”,函数(){</p><p>//获取想要添加验证样式的表单</p><p>var forms = document.getElementsByClassName('needs-validation');</p><p>//循环它们并防止提交</p><p>var验证= array.prototype.filter.call（表单，函数（表格）{</p><p>form.addeventListener（'提交'，函数（事件）{</p><p>if（form.checkvalidity（）=== false）{</p><p>event.preventdefault（）;</p><p>event.stopPropagation ();</p><p>}</p><p>form.classlist.add（'已验证'）;</p><p>}， 错误的）;</p><p>}）;</p><p>}， 错误的）;</p><p>}）（）;</p><p>> < /脚本</p></code><p><code class="js"></code></p></pre><p></p><p></p><p>结果:</p><p style="text-align: center;"><img src="//www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.gif?width=600&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.gif" alt="引导CSS表单验证示例" width="600" style="width: 600px; margin: 0px auto;" srcset="//www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.gif?width=300&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.gif 300w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.gif?width=600&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.gif 600w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.gif?width=900&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.gif 900w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.gif?width=1200&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.gif 1200w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.gif?width=1500&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.gif 1500w, //www.emcdepot.com/hs-fs/hubfs/How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.gif?width=1800&name=How%20to%20Create%20Web%20Forms%20in%20Bootstrap%20CSS%20%5BExamples%5D-1.gif 1800w" sizes="(max-width: 600px) 100vw, 600px"><span style="font-size: 13px;"><a href="https://www.w3schools.com/code/tryit.asp?filename=GF0Z3VTWDQ3T" rel="noopener" target="_blank" style="font-style: italic;">来源</a></span></p><h2>将表单添加到Bootstrap站点</h2><p>Web表单是您网站的重要设计元素。他们可以使您能够在线生成通讯注册，接受订单，并跟踪客户和潜在客户raybetapp的信息。Web表格部分地分为所有形状和尺寸，因为有很多不同的方法可以创建它们。</p><p>如果您正在使用Bootstrap，则可以使用上面的模板来创建不同的表单。或者，如果您没有使用开发框架，则可以完全从头开始构建它们。或者，如果您使用的是WordPress，则可以使用<a href="https://www.hubspot.com/products/wordpress?hubs_post-cta=conclusion_direct" rel="noopener" target="_blank">HubSpot的WordPress插件</a>。</p><p>
                <!--HubSpot Call-to-Action Code --><span class="hs-cta-wrapper" id="hs-cta-wrapper-a29b2a69-9067-403d-9b56-72075327c1f0"><span class="hs-cta-node hs-cta-a29b2a69-9067-403d-9b56-72075327c1f0" id="hs-cta-a29b2a69-9067-403d-9b56-72075327c1f0">
                  <!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]--><a href="https://cta-redirect.hubspot.com/cta/redirect/53/a29b2a69-9067-403d-9b56-72075327c1f0" target="_blank"><img class="hs-cta-img" id="hs-cta-img-a29b2a69-9067-403d-9b56-72075327c1f0" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/53/a29b2a69-9067-403d-9b56-72075327c1f0.png" alt="在WordPress网站上使用Hubspot Tools并连接两个平台而无需处理代码。点击这里了解更多。"></a></span></span>
                <!-- end HubSpot Call-to-Action Code --></p><p></p>
               <div id="slidebox">
                <a class="close"></a>
                <!--HubSpot Call-to-Action Code -->
                <span class="hs-cta-wrapper" id="hs-cta-wrapper-cbead496-a13b-42b7-ac28-406e8a97ad3a"><span class="hs-cta-node hs-cta-cbead496-a13b-42b7-ac28-406e8a97ad3a" id="hs-cta-cbead496-a13b-42b7-ac28-406e8a97ad3a">
                  <!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]--><a href="https://cta-redirect.hubspot.com/cta/redirect/53/cbead496-a13b-42b7-ac28-406e8a97ad3a" target="_blank"><img class="hs-cta-img" id="hs-cta-img-cbead496-a13b-42b7-ac28-406e8a97ad3a" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/53/cbead496-a13b-42b7-ac28-406e8a97ad3a.png" alt="在WordPress网站上使用Hubspot Tools并连接两个平台而无需处理代码。点击这里了解更多。"></a></span></span>
                <!-- end HubSpot Call-to-Action Code -->
               </div><p></p></span>
              <p class="post-content__publish-date">最初发布于2020年6月1日上午7:00:00，更新于2020年6月01日</p>
              <div class="post-content__topic-container blog-postPage-topic">
               <p>话题：</p>
               <a href="//www.emcdepot.com/website/bootstrap-css" class="post-content__topic" data-hubs_params="false">Bootstrap＆CSS</a>
              </div>
              <div class="post-content__social-share-container">
               <div id="hs_cos_wrapper_End_of_Post_CTA" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget">
                <div class="wt-blog__post__cta post-content__bottom-cta">
                 <div class="wt-blog__post__cta__content">
                  <h3>别忘了分享这篇文章！</h3>
                  <div class="addthis_inline_share_toolbox"></div>
                 </div>
                </div>
               </div>
              </div>
             </div>
            </div>
           </div>
           <section class="blog-section-header  blog-section-header--border-top    blog-section-header--arrow-down ">
            <h3 class="blog-section-header__heading">相关文章</h3>
           </section>
           <section class="related-posts">
            <!-- hasFeaturedImage: https://cdn2.hubspot.net/hubfs/53/Site%20owner%20learning%20Bootstrap%20CSS.jpg -->
            <article class="blog-card blog-card--one-third ">
             <figure>
              <a href="//www.emcdepot.com/website/bootstrap-css"><img src="//www.emcdepot.com/hubfs/Site%20owner%20learning%20Bootstrap%20CSS.jpg" alt="引导CSS的最终指南"></a>
             </figure>
             <div class="blog-card__content">
              <h3 class="blog-card__content-title"><a href="//www.emcdepot.com/website/bootstrap-css">引导CSS的最终指南</a></h3>
              <div class="blog-card__meta">
               <a href="//www.emcdepot.com/website" class="blog-card__blog-link">dota2雷竞技
</a>
               <a href="//www.emcdepot.com/website/bootstrap-css" class="blog-card__read-time">| 17分钟读数</a>
              </div>
             </div>
            </article>
            <!-- hasFeaturedImage: https://cdn2.hubspot.net/hubfs/53/Developers%20discussing%20how%20to%20override%20Bootstrap%20to%20customize%20their%20site.jpg -->
            <article class="blog-card blog-card--one-third ">
             <figure>
              <a href="//www.emcdepot.com/website/how-to-override-bootstrap-css"><img src="//www.emcdepot.com/hubfs/Developers%20discussing%20how%20to%20override%20Bootstrap%20to%20customize%20their%20site.jpg" alt="如何编辑，自定义和覆盖引导CSS以适合您的品牌"></a>
             </figure>
             <div class="blog-card__content">
              <h3 class="blog-card__content-title"><a href="//www.emcdepot.com/website/how-to-override-bootstrap-css">如何编辑，自定义和覆盖引导CSS以适合您的品牌</a></h3>
              <div class="blog-card__meta">
               <a href="//www.emcdepot.com/website" class="blog-card__blog-link">dota2雷竞技
</a>
               <a href="//www.emcdepot.com/website/how-to-override-bootstrap-css" class="blog-card__read-time">| 12分钟读数</a>
              </div>
             </div>
            </article>
            <!-- hasFeaturedImage: https://cdn2.hubspot.net/hubfs/53/Programmer%20using%20!important%20property%20in%20CSS.jpg -->
            <article class="blog-card blog-card--one-third ">
             <figure>
              <a href="//www.emcdepot.com/website/css-important"><img src="//www.emcdepot.com/hubfs/Programmer%20using%20!important%20property%20in%20CSS.jpg" alt="如何在CSS中使用!重要属性"></a>
             </figure>
             <div class="blog-card__content">
              <h3 class="blog-card__content-title"><a href="//www.emcdepot.com/website/css-important">如何在CSS中使用!重要属性</a></h3>
              <div class="blog-card__meta">
               <a href="//www.emcdepot.com/website" class="blog-card__blog-link">dota2雷竞技
</a>
               <a href="//www.emcdepot.com/website/css-important" class="blog-card__read-time">|6分钟阅读</a>
              </div>
             </div>
            </article>
           </section>
          </main>
         </main>
         <div class="blog-sticky-footer open hide" data-background="gradient4">
          <div class="hs-page-width-normal">
           <div class="blog-sticky-footer__container" data-timeout="3000">
            <div class="blog-sticky-footer__interactor"></div>
            <div class="blog-sticky-footer__collapsed-content hidden-content">
             <p><strong>扩大优惠</strong></p>
            </div>
            <div class="blog-sticky-footer__open-content visible-content">
             <p><strong>注册Hubspot的CMS软件雷竞技苹果下载官方版</strong></p>
             <a href="https://www.hubspot.com/products/cms?hubs_post-cta=mobile-blog-sticky" class="cta cta--medium cta--primary blog-sticky-update">现在得到它</a>
            </div>
           </div>
          </div>
         </div>
        </section>
       </div>
       <div data-modal="downloadForLater" data-exit="0" class="hsg-modal-container">
        <div class="hsg-modal-contents">
         <div data-background="secondary4" class="hsg-modal-header">
          <span class="hsg-icon hsg-icon-close"></span>
         </div>
         <div class="hsg-modal-text" style="text-align: left">
          <span id="hs_cos_wrapper_download_for_later" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form"><h3 id="hs_cos_wrapper_download_for_later_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text">下载以后</h3>
           <div id="hs_form_target_download_for_later"></div></span>
         </div>
        </div>
       </div>
      </main>
     </div>
    </div>
   </div>
  </div>
  <div class="footer-container-wrapper">
   <div class="footer-container container-fluid">
    <div class="row-fluid-wrapper row-depth-1 row-number-1">
     <div class="row-fluid ">
      <div class="span12 widget-span widget-type-global_group " style="" data-widget-type="global_group" data-x="0" data-w="12">
       <div class="" data-global-widget-path="generated_global_groups/4255443445.html">
        <div class="row-fluid-wrapper row-depth-1 row-number-1 ">
         <div class="row-fluid ">
          <div class="span12 widget-span widget-type-raw_jinja " style="" data-widget-type="raw_jinja" data-x="0" data-w="12">
           <footer class="hsg-footer">
            <div class="hsg-footer__layout">
             <div id="back-link" class="hsg-footer__logo-caret">
              <a class="hsg-footer__logo-caret-home" href="#">回来</a>
              <span class="hsg-footer__close" role="img" aria-label="Close"></span>
             </div>
             <nav class="hsg-footer__nav">
              <div class="hsg-footer__nav-left" role="navigation">
               <section class="hsg-footer__nav-column hsg-footer__nav-column-left">
                <input type="checkbox" id="hsg-footer-column-0" name="hsg-footer-column-0">
                <label for="hsg-footer-column-0">热门特色</ label><ul>
                 <li class="hsg-footer__nav-item" data-order="0"><a href="https://www.hubspot.com/products/sales/schedule-meeting" data-order="0" data-linkorder="0">免费会议计划程序应用程序</a></li>
                 <li class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/products/marketing/social-inbox" data-order="1" data-linkorder="1">社交媒体工具</a></li>
                 <li class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/products/sales/email-tracking" data-order="2" data-linkorder="2">电子邮件跟踪软件雷竞技苹果下载官方版</a></li>
                 <li class="hsg-footer__nav-item" data-order="3"><a href="https://www.hubspot.com/products/sales/sales-automation" data-order="3" data-linkorder="3">销售电子邮件自动化</a></li>
                 <li class="hsg-footer__nav-item" data-order="4"><a href="https://www.hubspot.com/products/marketing/ads" data-order="4" data-linkorder="4">广告软件雷竞技苹果下载官方版</a></li>
                 <li class="hsg-footer__nav-item" data-order="5"><a href="https://www.hubspot.com/products/marketing/email" data-order="5" data-linkorder="5">电子邮件营销软件雷竞技苹果下载官方版</a></li>
                 <li class="hsg-footer__nav-item" data-order="6"><a href="https://www.hubspot.com/products/crm/lead-management" data-order="6" data-linkorder="6">领导管理软件雷竞技苹果下载官方版</a></li>
                 <li class="hsg-footer__nav-item" data-order="7"><a href="https://www.hubspot.com/products/crm/pipeline-management" data-order="7" data-linkorder="7">管道管理工具</a></li>
                 <li class="hsg-footer__nav-item" data-order="8"><a href="https://www.hubspot.com/products/sales/email-templates-sales" data-order="8" data-linkorder="8">销售电子邮件模板</a></li>
                 <li class="hsg-footer__nav-item" data-order="9"><a href="https://www.hubspot.com/products/service/help-desk" data-order="9" data-linkorder="9">帮助台软件雷竞技苹果下载官方版</a></li>
                 <li class="hsg-footer__nav-item" data-order="10"><a href="https://www.hubspot.com/products/marketing/forms" data-order="10" data-linkorder="10">免费在线表格生成器</a></li>
                 <li class="hsg-footer__nav-item" data-order="11"><a href="https://www.hubspot.com/products/crm/chatbot-builder" data-order="11" data-linkorder="11">免费的聊天机器人制造者</a></li>
                 <li class="hsg-footer__nav-item" data-order="12"><a href="https://www.hubspot.com/products/crm/live-chat" data-order="12" data-linkorder="12">免费实时聊天软件雷竞技苹果下载官方版</a></li>
                 <li class="hsg-footer__nav-item" data-order="13"><a href="https://www.hubspot.com/products/marketing/analytics" data-order="13" data-linkorder="13">营销分析</a></li>
                 <li class="hsg-footer__nav-item" data-order="14"><a href="https://www.hubspot.com/products/marketing/landing-pages" data-order="14" data-linkorder="14">免费登陆页面建设者</a></li>
                </ul>
               </section>
              </div>
              <div class="hsg-footer__nav-right" role="navigation">
               <div class="hsg-footer__nav-full" role="navigation">
                <section class="hsg-footer__nav-column ">
                 <input type="checkbox" id="hsg-footer-column-1" name="hsg-footer-column-1">
                 <label for="hsg-footer-column-1">免费工具</ label><ul>
                  <li class="hsg-footer__nav-item" data-order="0"><a href="https://website.grader.com/?__hstc=20629287.e4e046660731447bf82affe18aa75831.1482962870986.1487962165415.1487964870240.141&__hssc=20629287.1.1487964870240&__hsfp=3218882972" data-order="0" data-linkorder="0">网站学生</a></li>
                  <li class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/make-my-persona" data-order="1" data-linkorder="1">让我的角色</a></li>
                  <li class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/email-signature-generator" data-order="2" data-linkorder="2">电子邮件签名生成器</a></li>
                  <li class="hsg-footer__nav-item" data-order="3"><a href="https://www.hubspot.com/blog-topic-generator" data-order="3" data-linkorder="3">博客的想法发电机</a></li>
                  <li class="hsg-footer__nav-item" data-order="4"><a href="https://www.hubspot.com/invoice-template-generator" data-order="4" data-linkorder="4">发票模板生成器</a></li>
                  <li class="hsg-footer__nav-item" data-order="5"><a href="https://www.hubspot.com/marketing-plan-template-generator" data-order="5" data-linkorder="5">营销计划发生器</a></li>
                  <li class="hsg-footer__nav-item" data-order="6"><a href="https://www.hubspot.com/business-templates" data-order="6" data-linkorder="6">免费商业模板</a></li>
                  <li class="hsg-footer__nav-item" data-order="7"><a href="https://www.hubspot.com/industry-data" data-order="7" data-linkorder="7">行业基准数据</a></li>
                  <li class="hsg-footer__nav-item" data-order="8"><a href="https://www.hubspot.com/comparisons" data-order="8" data-linkorder="8">雷竞技苹果下载官方版软件比较库</a></li>
                 </ul>
                </section>
               </div>
               <div class="hsg-footer__nav-full" role="navigation">
                <section class="hsg-footer__nav-column ">
                 <input type="checkbox" id="hsg-footer-column-2" name="hsg-footer-column-2">
                 <label for="hsg-footer-column-2">raybet电子竞技</label>
                 <ul>
                  <li class="hsg-footer__nav-item" data-order="0"><a href="https://www.hubspot.com/our-story" data-order="0" data-linkorder="0">关于我们</a></li>
                  <li class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/careers" data-order="1" data-linkorder="1">职业生涯</a></li>
                  <li class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/company/management" data-order="2" data-linkorder="2">管理团队</a></li>
                  <li class="hsg-footer__nav-item" data-order="3"><a href="https://www.hubspot.com/company/board-of-directors" data-order="3" data-linkorder="3">董事会</a></li>
                  <li class="hsg-footer__nav-item" data-order="4"><a href="https://ir.hubspot.com/?_ga=2.262843276.12874469.1592422655-430007000.1592422655" data-order="4" data-linkorder="4">投资者关系</a></li>
                  <li class="hsg-footer__nav-item" data-order="5"><a href="//www.emcdepot.com" data-order="5" data-linkorder="5">博客</a></li>
                  <li class="hsg-footer__nav-item" data-order="6"><a href="https://www.hubspot.com/company/contact" data-order="6" data-linkorder="6">联系我们</a></li>
                 </ul>
                </section>
               </div>
               <div class="hsg-footer__nav-split" role="navigation">
                <section class="hsg-footer__nav-column ">
                 <input type="checkbox" id="hsg-footer-column-3" name="hsg-footer-column-3">
                 <label for="hsg-footer-column-3">顾客</ label><ul>
                  <li class="hsg-footer__nav-item" data-order="0"><a href="https://help.hubspot.com/" data-order="0" data-linkorder="0">客户支持</a></li>
                  <li class="hsg-footer__nav-item" data-order="1"><a href="https://academy.hubspot.com/hubspot-user-groups" data-order="1" data-linkorder="1">加入本地用户组</a></li>
                 </ul>
                </section>
                <section class="hsg-footer__nav-column ">
                 <input type="checkbox" id="hsg-footer-column-4" name="hsg-footer-column-4">
                 <label for="hsg-footer-column-4">raybet平台</label>
                 <ul>
                  <li class="hsg-footer__nav-item" data-order="0"><a href="https://www.hubspot.com/partners" data-order="0" data-linkorder="0">所有合作伙伴项目</a></li>
                  <li class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/partners/solutions" data-order="1" data-linkorder="1">解决方案合作伙伴计划</a></li>
                  <li class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/partners/app" data-order="2" data-linkorder="2">应用合作伙伴计划</a></li>
                  <li class="hsg-footer__nav-item" data-order="3"><a href="https://www.hubspot.com/startups/partners" data-order="3" data-linkorder="3">初创公司的Hubspot</a></li>
                  <li class="hsg-footer__nav-item" data-order="4"><a href="https://www.hubspot.com/partners/affiliates" data-order="4" data-linkorder="4">联盟计划</a></li>
                 </ul>
                </section>
               </div>
              </div>
             </nav>
            </div>
            <section class="hsg-footer__contact-links">
             <ul class="hsg-footer__social">
              <li><a href="https://www.facebook.com/hubspot" target="_blank" class="hstc_facebook"><i class="hsg-icon hsg-icon-facebook"></i><span class="hidden-social">Facebook</span></a></li>
              <li><a href="https://www.instagram.com/hubspot" target="_blank" class="hstc_instagram"><i class="hsg-icon hsg-icon-instagram"></i><span class="hidden-social">Instagram.</span></a></li>
              <li><a href="https://youtube.com/user/HubSpot" target="_blank" class="hstc_youtube"><i class="hsg-icon hsg-icon-youtube"></i><span class="hidden-social">Youtube</span></a></li>
              <li><a href="https://twitter.com/HubSpot" target="_blank" class="hstc_twitter"><i class="hsg-icon hsg-icon-twitter"></i><span class="hidden-social">推特</span></a></li>
              <li><a href="https://www.linkedin.com/company/hubspot" target="_blank" class="hstc_linkedin"><i class="hsg-icon hsg-icon-linkedin"></i><span class="hidden-social">linkedin</span></a></li>
              <li><a href="https://medium.com/@HubSpot" target="_blank" class="hstc_medium"><i class="hsg-icon hsg-icon-medium"></i><span class="hidden-social">中等的</span></a></li>
             </ul>
            </section>
            <section class="hsg-footer__bottom">
             <div class="hsg-footer__apps">
              <a class="hsg-footer__app" href="https://apps.apple.com/us/app/hubspot/id1107711722" aria-label="Link to App Store"><img class="hsg-deferred homepage-mobile-footer-apple" data-src="https://cdn2.hubspot.net/hubfs/53/app%20store%20high%20res.png" alt="应用商店"></a>
              <a class="hsg-footer__app" href="https://play.google.com/store/apps/details?id=com.hubspot.android&hl=en_US" aria-label="Link to Google Play"><img class="hsg-deferred homepage-mobile-footer-google" data-src="https://cdn2.hubspot.net/hubfs/53/google%20play%20high%20res.png" alt="谷歌玩"></a>
             </div>
             <div class="hsg-footer__logo" role="img">
              <a href="https://www.hubspot.com" aria-label="HubSpot Home Logo"><img class="hsg-deferred" data-src="https://www.hubspot.com/hubfs/WBZ-1165%20Global%20Nav%20Redesign/Wordmark-White.svg" alt="Hubspot徽标"></a>
              <p>raybet平台</p>
             </div>
             <div class="hsg-footer__copyright">
              <ul>
               <li><a href="https://legal.hubspot.com/legal-stuff">合法的东西</a></li>
               <li><a href="https://legal.hubspot.com/privacy-policy">隐私政策</a></li>
              </ul>
             </div>
            </section>
           </footer>
          </div>
         </div>
         <!--end widget-span -->
        </div>
        <!--end row-->
       </div>
       <!--end row-wrapper -->
      </div>
     </div>
     <!--end widget-span -->
    </div>
    <!--end row-->
   </div>
   <!--end row-wrapper -->
   <div class="row-fluid-wrapper row-depth-1 row-number-2">
    <div class="row-fluid ">
     <div class="span12 widget-span widget-type-raw_html " style="" data-widget-type="raw_html" data-x="0" data-w="12">
      <div class="cell-wrapper layout-widget-wrapper">
       <span id="hs_cos_wrapper_module_1497301113455132" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_raw_html" style="" data-hs-cos-general-type="widget" data-hs-cos-type="raw_html">
        <!-- prev 4208 --></span>
      </div>
      <!--end layout-widget-wrapper -->
     </div>
     <!--end widget-span -->
    </div>
    <!--end row-->
   </div>
   <!--end row-wrapper -->
  </div>
  <!--end footer -->
  <!--end footer wrapper -->
  <!--[if lte IE 8]>
    <script charset="utf-8" src="https://js.hsforms.net/forms/v2-legacy.js"></script>
    <![endif]-->
  <!-- Start of HubSpot Analytics Code -->
  <!-- End of HubSpot Analytics Code -->
  <!-- Begin Domain Settings Code -->
  <!--[if lt IE 9]>
<div style="position:absolute;top:42px;left:0;width:100%;padding:5px 0 5px  15px;color:#b94a48;background:#f2dede";font-size:14px;>Please note: HubSpot no longer supports Internet Explorer version 8 or older. You are using an outdated browser, we recommend you <a href="http://knowledge.hubspot.com/update-browser">upgrade your browser</a> for a better and safer experience.</a></div>
<![endif]-->
  <!-- HREFLANG MACRO -->
  <!-- begin Convert -->
  <!-- end Convert -->
  <!-- End Domain Settings Code -->
  <div id="fb-root"></div>
 </body>
</html>

订阅我们的博客

订阅电子邮件

谢谢！你已经订阅了。

引导形式CSS

引导表单CSS示例

Bootstrap选择示例

Bootstrap文本区域示例