Bootstrap4 形式

Bootstrap 4 的默认设置

表单控件使用 Bootstrap 自动接收一些全局样式：

全部文字化<input>,<textarea>，和<select>具有类的元素.form-control宽度为 100%。

Bootstrap 4 表单布局

Bootstrap 提供两种类型的表单布局：

堆叠（全角）形式
内联表格

Bootstrap 4 堆叠形式

电子邮件：

密码：

记住账号

以下示例创建一个堆叠表单，其中包含两个输入字段、一个复选框和一个提交按钮。

添加一个包装元素.form-group，围绕每个表单控件，以确保适当的边距：

示例

<form action="/action_page.html">
<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 内联表单

在内联形式中，所有元素都是内联且左对齐的。

注意：这仅适用于宽度至少为 576 像素的视口内的表单。在小于 576 像素的屏幕上，它将水平堆叠。

内联表单的附加规则：

添加类.form-inline到<form>元素

以下示例创建一个内联表单，其中包含两个输入字段、一个复选框和一个提交按钮：

示例

<form class="form-inline" action="/action_page.html">
  <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>

亲自试一试 »

带有实用程序的内联表单

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

示例

<form class="form-inline" action="/action_page.html">
  <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>

亲自试一试 »

您将了解有关间距和其他 "helper" 类的更多信息Bootstrap 4 实用程序章节。

表格行/网格

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

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

示例

亲自试一试 »

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

示例

亲自试一试 »

表单验证

您可以使用不同的验证类向用户提供有值的反馈。添加任一.was-validated或者.needs-validation到<form>元素，具体取决于您是否想在提交表单之前或之后提供验证反馈。输入字段将具有绿色（有效）或红色（无效）边框来指示表单中缺少的内容。您还可以添加一个.valid-feedback或者.invalid-feedback消息明确告诉用户缺少什么，或者在提交表单之前需要完成什么。

示例

在这个例子中，我们使用.was-validated在提交表格之前指出缺少的内容：

<form action="/action_page.html" 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.html" 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>
// Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
    // Get the forms we want to add validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    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>

亲自试一试 »