Bootstrap 4 表单

Bootstrap 4 的默认设置

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

表单控件会自动接收一些带有 Bootstrap 的全局样式:

具有 .form-control 类的所有文本 <input>, <textarea> 和 <select> 元素的宽度均为 100%。

Bootstrap 4 表单布局

提供了两种类型的表单布局:

堆叠表单
内联表单

Bootstrap 4 堆叠表单

Remember me

以下实例使用两个输入框，一个复选框，一个提交按钮来创建堆叠表单

在每个表单控件周围添加一个带有 .form-group 的包装器元素，以确保适当的边距:

实例

<form action="/action_page.asp">
<div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" placeholder="Enter password" id="pwd">
</div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

亲自试一试 »

Bootstrap 内联表单

所有内联表单中的元素都是左对齐的。

注意:在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。

内联表单的附加规则:

内联表单需要在 <form> 元素上添加 .form-inline 类。

以下实例使用两个输入框，一个复选框，一个提交按钮来创建内联表单:

实例

<form class="form-inline" action="/action_page.asp">
  <label for="email">Email address:</label>
  <input type="email" class="form-control" placeholder="Enter email" id="email">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" placeholder="Enter password" id="pwd">
<div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

亲自试一试 »

带有实用程序的内联表单

上面的内联表单感觉"被压缩"了，并且使用 Bootstrap 的间距实用程序看起来会更好。以下示例为所有设备（小型及以上）上的每个输入添加一个右边距 (.mr-sm-2)。边距底部类 (.mb-2) 用于在输入字段中断时设置其样式（由于空间/宽度不足而从水平变为垂直）:

实例

<form class="form-inline" action="/action_page.asp">
  <label for="email" class="mr-sm-2">Email address:</label>
  <input type="email" class="form-control mb-2 mr-sm-2" placeholder="Enter email" id="email">
  <label for="pwd" class="mr-sm-2">Password:</label>
  <input type="password" class="form-control mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

亲自试一试 »

您将在我们的Bootstrap 4 实用程序章节中了解有关间距和其他“帮助”类的更多信息。

表格行/网格

您还可以使用列 (.col) 来控制表单输入的宽度和对齐方式，而无需使用间距实用程序。请记住将它们放在 .row 容器中。

在下面的示例中，我们使用并排显示的两列。您将在Bootstrap 网格章节中了解更多关于列和行的信息。

实例

亲自试一试 »

如果您想要更少的网格边距（覆盖默认列间距），请使用 .form-row 而不是 .row:

实例

亲自试一试 »

表单验证

Please fill out this field.

实例

在这个例子中，我们使用 .was-validated 来表明在提交表单之前缺少什么:

<form action="/action_page.asp" class="was-validated">
<div class="form-group">
    <label for="uname">Username:</label>
    <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Check this checkbox to continue.</div>
    </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

亲自试一试 »

实例

在这个例子中，我们使用了.needs-validation，它会在表单提交之后添加验证效果（如果有什么遗漏的话）。请注意，您还必须添加一些 jQuery 代码才能使此示例正常工作:

<form action="/action_page.asp" class="needs-validation" novalidate>
<div class="form-group">
    <label for="uname">Username:</label>
    <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Check this checkbox to continue.</div>
    </label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

<script>
// 如果存在无效字段，则禁用表单提交
(function() {
'use strict';
window.addEventListener('load', function() {
    // 获取我们想要添加验证样式的表单
    var forms = document.getElementsByClassName('needs-validation');
    // 循环它们并防止提交
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
}, false);
})();
</script>

亲自试一试 »

读后有收获请站长喝杯咖啡 zhanshang