如何在Bootstrap CSS中创建Web表单

从调查到航运表格到注册表格和测验，web表单在互联网上无处不在。它们会派上用场的原因有很多。您可以使用web表单将访问者转换为潜在的潜在客户，并跟踪现有客户的个人信息、购买、反馈和调查响应。

你如何将这个互动元素添加到你的网站中这取决于你如何构建你的网站。如果你是在WordPress上创建网站，然后你可以安装一个插件-例如HubSpot的WordPress插件-添加表单到您的网站。如果你要创建一个网站引导CSS，那么你可以用CSS类在您的站点上快速添加表单。

我们将在这篇文章中详细介绍这个过程。然后，我们走过去常见的风格和Bootstrap表单的例子．让我们开始吧。

引导形式CSS

感谢Bootstrap中包含的预先设计的模板，为您的站点创建表单很容易。

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

图片来源

下面是你要使用的代码:


<形式>
< div class = "形式的班级”>
<标签= " exampleInputEmail1 " >电子邮件地址> < /标签
< / div >
< div class = "形式的班级”>
<标签= " exampleInputPassword1 " >密码> < /标签
< / div >
< div class = "形式的班级form-check”>
< / div >

注意，

元素有开始和结束标记。在这些标签中，有很多HTML元素，包括分隔符、标签、输入和按钮，这些都构成了表单。为了使它们工作，它们需要在Bootstrap中使用正确的表单类进行样式设置。

我们可以在上面代码片段的三个容器中看到其中的一些操作。让我们来分解每个元素和样式。

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

这些元素的前面是元素，这样用户就知道要输入什么信息以及要输入到哪个框中。同时，每个和对被包装在它们自己的容器中，或者用.form-group类样式化的

元素。

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

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

现在我们已经了解了如何在Bootstrap中构建基本表单，接下来让我们看看如何修改和扩展表单类。我们将从Bootstrap提供的不同风格的基本概述开始，然后介绍示例。

引导形式风格

可以使用任何预定义的表单样式，如引导程序的文档，以便在您的站点上快速添加表单。让我们简要地看看下面最常见的样式。

引导选择形式

Bootstrap选择表单包括一个带有一系列选项的下拉菜单。用户可以选择其中一个选项。它需要.form-control类。

引导选择表单包括一个下拉菜单

引导文本区域表单

Bootstrap文本区域表单包括一个文本区域，用户可以在其中输入评论或评论。文本区域可以包含无限数量的字符——除非设置了限制。它需要.form-control类。

引导附件形式允许用户上传文件

引导附件形式

Bootstrap附件或文件输入表单允许用户选择和上传文件。它需要.form-control-file类。

引导文本区域表单样式允许用户输入注释

引导网格形式

Bootstrap网格表单是任何具有多个列、不同宽度和其他对齐选项的表单。它需要。row和。col类。

引导网格表单样式有多个列供用户在同一行的不同输入控件中输入姓名

引导地址形式

Bootstrap地址表单是使用Bootstrap网格类构建的复杂表单的一个例子。.row类用于形成组，.col-*-*类用于指定标签和控件的宽度，以便城市、州和zip都位于同一水平行。

Bootstrap Address表单使用网格类在不同的行上显示Address和Address 2标签，在单个水平行上显示城市、州和zip标签

引导水平形式

Bootstrap水平窗体在同一水平行上显示标签及其关联的窗体控件。像地址表单样式一样，它需要.row类和.col-*-*类。.col-form-label类还用于确保标签与相关的表单控件垂直居中。

引导水平窗体样式在同一水平行上显示标签及其关联的窗体控件

引导内联形式

Bootstrap内联表单在单个水平行上显示一系列标签、表单控件和按钮。它需要.form-inline类。

引导显示姓名和用户名标签、复选框和提交按钮的内联表单

引导表单验证

Bootstrap验证表单为用户提供有价值的、可操作的反馈，尤其是在用户尝试提交表单之后。这种表单样式通常使用自定义颜色、边框、焦点样式和背景图标来传达反馈。它需要。{valid|invalid}-feedback类。

引导表单验证样式告诉用户在提交表单之前选择一个有效的状态并同意条款和条件

引导范围输入表单

Bootstrap范围输入表单允许用户水平滚动范围输入。它需要.form-control-range类。

引导范围输入表单样式允许用户水平滚动范围输入

引导复选框形式

Bootstrap复选框表单允许用户在列表中选择一个或几个选项。它要求将.form-check类以及输入类型属性设置为“checkbox”。

引导复选框表单样式允许用户在列表中选择一个或多个选项

引导广播形式

Bootstrap单选按钮表单允许用户在列表中只选择一个选项。它要求将.form-check类以及输入类型属性设置为“radio”。

引导无线电表单风格允许用户从多个选项中只选择一个

引导表单CSS示例

下面是一些演示Bootstrap表单样式范围的示例。每个示例都将显示所需的不同类、表单布局等等。

我会用CodePen编辑器来创建示例，以便您可以单击任何Source链接以查看示例背后的完整代码片段。

1.引导选择的例子

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

之前。


< div class = "形式的班级”>
>你是怎么知道我们的?< / >标签
<选择类= "表单控件" id = " exampleFormControlSelect1 " >
<选项>选择一个< /选项>
<选项> < /广告选项>
<选项>朋友> < /选项
< <选项>传单/选项>
电视<选项> < /选项>
<选项>博客> < /选项
< /选择>
< / div >

结果:

图片来源

您可以了解更多关于在表单、导航菜单和网站的其他部分中创建下拉菜单的信息如何创建HTML下拉菜单[+示例]．

2.引导文本区域示例

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

之前。


< div class = "形式的班级”>
你是怎么知道我们的?< / >标签
< / div >

结果:

图片来源

3.引导附件的例子

如果想让用户在提交表单之前上传文件，那么可以使用元素并使用.form-control-file类设置样式。将其与元素配对，并像往常一样将其包装在带有.form-group类样式的

中。下面是要在按钮之前添加的代码。


< div class = "形式的班级”>
上传简历和求职信
< / div >

结果:

图片来源

4.引导网格表单示例

要构建更复杂的表单，可以使用Bootstrap的网格类。例如，假设您希望电子邮件地址和密码的输入字段并列，而其他元素垂直堆叠。您还希望删除输入字段上方的标签，并将该文本保留在字段中。

然后可以用三个div替换前两个

容器。第一个是使用.row类的样式。它将包含两个div，每个div都使用.col类进行样式化，并具有一个占位符属性。


< div class = "行" >
< div class = "坳”>
< / div >
< div class = "坳”>
< / div >
< / div >

结果:

图片来源

请注意我在CSS中添加了一些边距设置，使布局看起来更好。您可以通过单击源代码链接来查看该代码。

5.引导地址表单示例

您可以使用Bootstrap的网格类创建一个比上面的布局更复杂的布局。例如，假设您希望将电子邮件地址和密码的输入字段放在一起。然后，您希望两个地址字段垂直堆叠，并且城市、州和zip字段位于同一行。

由于Bootstrap是一个12列的系统，您必须指定希望每个输入跨越的12个可用列的数目。因此，要将电子邮件和密码输入放在两个等宽列中，可以使用.col-md-6类。接下来的两个div—用于address和address 2—将不需要.col类，因为它们都占用一个水平行。对于最后一行，您希望城市输入的大小与电子邮件和密码输入的大小相同。你想要的状态输入是这个大小的三分之二，拉链是这个大小的一半。因此，可以使用。col-md-6表示city，。col-md-4表示state，。col-md-2表示zip(6 + 4 + 2 = 12)。

然后在HTML中添加以下内容，就在包含复选框的

之前。


< div class = " form-row”>
< div class = "形式的班级col-md-6”>
<标签= " inputEmail4 " >邮件> < /标签
< / div >
< div class = "形式的班级col-md-6”>
<标签= " inputPassword4 " >密码> < /标签
< / div >
< / div >
< div class = "形式的班级”>
<标签= " inputAddress " >地址> < /标签
< / div >
< div class = "形式的班级”>
<标签= " inputAddress2 " >地址2 > < /标签
 . class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor
< / div >
< div class = " form-row”>
< div class = "形式的班级col-md-6”>
城市<标签= " inputCity " > < / >标签
< / div >
< div class = "形式的班级col-md-4”>
<标签= " inputState“> < / >标签
<选择id = " inputState " class = "表单控件”>
<选项>选择…< /选项>
<选项>…< /选项>
< /选择>
< / div >
< div class = "形式的班级col-md-2”>
<标签= " inputZip " > Zip > < /标签
< / div >
< / div >

结果:

Bootstrap Address Form示例使用Bootstrap网格类将城市、州和zip放在同一水平行-1上

图片来源

6.引导水平窗体示例

您还可以在同一水平行上显示标签及其关联的表单控件，而不是相互堆叠。

为此，需要将.form-group行类应用于父div。然后将.col-sm-2类应用于label元素，将.col-sm-10类应用于包含input元素和button元素的div元素。您还可以对label元素应用.col-form-label类，以确保它们与相关的表单控件垂直居中。

下面是全部代码:


<形式>
< div class = "形式的班级行”>
Email
< div class = " col-sm-10”>
< / div >
< / div >
< div class = "形式的班级行”>
< div class = " col-sm-10”>
< / div >
< / div >
<自定义字段类= "形式的班级排" >
< div class = " form-check”>
<标签类= =“gridRadios1”>“form-check-label”
第一个电台
< / >标签
< / div >
< div class = " form-check”>
 . 
 . 
<标签类= =“gridRadios3”>“form-check-label”
第三禁用无线
< / >标签
< / div >
< / div >
< /自定义字段>
< div class = "形式的班级行”>
< div class = " col-sm-10 offset-sm-2”>
< div class = " form-check”>
<标签类= =“gridCheck1”>“form-check-label”
复选框例子
< / >标签
< / div >
< / div >
< / div >
< div class = "形式的班级行”>
< div class = " col-sm-10”>

结果:

引导水平窗体示例在同一水平行中显示标签和关联的窗体控件

图片来源

7.引导内联表单示例

如果您希望占用更少的空间，那么您可能需要创建一个内联表单，其中所有元素都在一行中。可以通过将.form-inline类添加到元素和一些特定于大小的列类来实现。

你会看到整个代码中都添加了mb-2，例如，在Bootstrap中将这些元素的margin-bottom设置为.5rem。同样地，mr-sm-2将这些元素的右边距设为。5雷姆，断点设为小。

让我们使用上面的示例并将其转换为内联形式。这是代码:


<形式类= " form-inline " >
<标签类= =“inlineFormInputName2”>“sr-only”名称> < /标签
 . Email Address . class="sr-only" for="inlineFormInputGroupUsername2
< span style =" font - family:宋体;font - family:宋体
< / div >
<标签类= =“inlineFormCheck”>“form-check-label”
记得我
< / >标签
< / div >

结果:

图片来源

请注意:如果你使用的设备或视口小于576像素宽，那么元素将相互堆叠。例如，如果我把屏幕缩小到400px，表单看起来像这样:

8.引导表单验证示例

假设你想要在用户填写表单时加入可操作的反馈，比如提醒他们在提交前忘记勾选“记住我”框。可以通过对Bootstrap 元素应用验证类来实现。

例如，.was-validated类会让用户知道在提交前哪些字段必须填写或勾选，而.needs-validation类只会让用户在尝试提交后知道字段是否丢失。

无论您使用哪个类，已填写的输入字段将有一个绿色边框，而未填写的输入字段将有一个红色边框。如果您想准确地告诉用户缺少哪些信息(以及哪些信息已经被成功提供)，那么您甚至可以添加.valid-feedback和.invalid-feedback消息。

在下面的示例中，让我们使用.needs-validation类，以便用户知道是否缺少了什么。

下面是您需要添加到HTML的中的HTML。


< div class = "形式的班级”>
<标签= "电子邮件" >电子邮件地址> < /标签
 . 感谢您输入一个有效的电子邮件地址
请输入您的电子邮件地址
< / div >
< div class = "形式的班级”>
<标签= " pwd " >密码> < /标签
 . 感谢您输入有效的密码
请输入您的密码
< / div >
< div class = "形式的班级form-check”>
<标签类= " form-check-label " >
记住我
请选中此框继续
< / >标签
< / div >

下面是你需要在HTML的中添加的初始JavaScript。


< >脚本
//如果存在无效字段，则禁用表单提交
(函数(){
使用严格的;
窗口。addEventListener(“负载”,函数(){
//获取想要添加验证样式的表单
var forms = document.getElementsByClassName('needs-validation');
//循环它们并防止提交
var validation = Array.prototype.filter。调用函数的形式,(形式){
的形式。addEventListener(‘提交’,函数(事件){
if (form.checkValidity() === false) {
event.preventDefault ();
event.stopPropagation ();
｝
form.classList.add(验证);
},假);
})；
},假);
})();
> < /脚本

结果:

引导CSS表单验证示例图片来源

9.引导帮助文本表单示例

另一种向填写表单的用户提供可操作反馈的方法是包含帮助文本。例如，您可以在密码输入字段下面或旁边显式地声明密码要求。可以通过将.form-text类应用到块级元素或将.form-text和.text-哑类应用到内联元素(如)来实现。

确保包含一个由咏叹调描述的属性，以便屏幕阅读器等辅助技术能够理解并阅读用户的帮助文本。

下面是你要在电子邮件地址输入之后和复选框之前添加的代码:


< div class = "形式的班级”>
<标签= " inputPassword5 " >密码> < /标签
密码长度为8 ~ 20个字符，包含字母和数字，不能包含空格、特殊字符和表情符号。
> < /小
< / div >

结果:

引导帮助文本示例表单提供了正确填写密码的说明

图片来源

10.引导禁用表单示例

假设您想禁用表单的某个选项或部分，以使其不可点击和不可使用。您可以在单个输入上添加disabled boolean属性，以防止用户交互并使其看起来更轻，或者您可以将其添加到

元素中，以指定相关的表单元素组被禁用。

下面是禁用字段集的代码:


<自定义字段禁用>
< <传奇>禁用控件组例子/传奇>
< div class = "形式的班级”>
<标签= " disabledTextInput " >禁用输入> < /标签
< / div >
< div class = "形式的班级”>
Disabled select menu
<选择id = " disabledSelect " class = "表单控件”>
<选项>禁用选择< /选项>
< /选择>
< / div >
< div class = "形式的班级”>
< div class = " form-check”>
<标签类= =“disabledFieldsetCheck”>“form-check-label”
不能检查这个
< / >标签
< / div >
< / div >

结果:

用禁用的字段集引导表单示例，因此用户不能完成和提交表单

图片来源

11.引导复选框和单选表单示例

通过添加复选框和等交互元素，可以在表单中实现更多的用户交互单选按钮．假设你想为用户提供一个简单的是或否选项，比如“记住我”。然后你可以包含一个复选框。用户可以选择一个或没有选项。另一方面，单选按钮让用户在每个组中只选择一个选项。

复选框和单选按钮都需要.form-check类。它们的输入类型属性还必须分别设置为“checkbox”和“radio”。

下面的代码将在水平布局中创建三个单选按钮和一个复选框元素。


<自定义字段类= "形式的班级排" >
< div class = " form-check”>
<标签类= =“gridRadios1”>“form-check-label”
第一个电台
< / >标签
< / div >
< div class = " form-check”>
 . 
 . 
< div >
< div class = " form-check”>
<标签类= =“gridCheck1”>“form-check-label”
记得我
< / >标签
< / div >
< / div >
< / div >