上一节:
下一节:

  Bootstrap 表单

  • 定义和使用

    表单控件会通过 Bootstrap 自动接收一些全局样式：
    类 .form-control 的所有文本<input> ，<textarea> 和 <select> 元素的宽度均为100％。
    下面的示例创建具有两个输入字段，一个复选框和一个提交按钮的堆叠表单。
    在每个窗体控件周围添加一个带有 .form-group 的 wrapper 元素，以确保适当的边距： 
    <div class ="container">
  <form action="">
    <div class="form-group">
      <label for="email">邮箱地址：</label>
      <input type="email" class="form-control" placeholder="请输入邮箱" id="email">
    </div>
    <div class="form-group">
      <label for="pwd">密码：</label>
      <input type="password" class="form-control" placeholder="请输入密码" id="pwd">
    </div>
    <div class="form-group form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox"> 勾选同意
      </label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>
    尝试一下
    输出结果如下：

  • 内联表单

    以内联形式，所有元素都是内联且左对齐。
    注意：这仅适用于视口内至少576px宽的表单；在小于576px的屏幕上，它将水平堆叠。
    内联表单的附加规则：将类 .form-inline 添加到 <form> 元素。
    下面的示例创建一个内联表单，其中包含两个输入字段，一个复选框和一个提交按钮： 
    <div class ="container">
  <form class="form-inline">
    <label for="email">邮箱地址:</label>
    <input type="email" class="form-control" placeholder="请输入邮箱" id="email">
    <label for="pwd">密码:</label>
    <input type="password" class="form-control" placeholder="请输入密码" id="pwd">
    <div class="form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox"> 勾选同意
      </label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>
    尝试一下
    输出结果如下：
    上面的内联形式感觉“已压缩”，使用 Bootstrap 的间距实用程序会看起来更好。
    下面的示例在所有设备（小型和大型）上的每个输入上添加一个右边界 .mr-sm-2。 当输入字段中断时（由于没有足够的空间/宽度，从水平到垂直），使用空白边距类 .mb-2 设置样式： 
    <div class ="container">
  <form class="form-inline">
    <label for="email" class="mr-sm-2">邮箱地址:</label>
    <input type="email" class="form-control mb-2 mr-sm-2" placeholder="请输入邮箱" id="email">
    <label for="pwd" class="mr-sm-2">密码:</label>
    <input type="password" class="form-control mb-2 mr-sm-2" placeholder="请输入密码" id="pwd">
    <div class="form-check mb-2 mr-sm-2">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox"> 勾选同意
      </label>
    </div>
    <button type="submit" class="btn btn-primary mb-2">提交</button>
  </form>
</div>
    尝试一下
    输出结果如下：

  • 表单网格布局

    您也可以使用列 .col 来控制表单输入的宽度和对齐方式，而无需使用间距实用程序。 只要记住将它们放在 .row 容器中即可。 
     <form>
   <div class="row">
      <div class="col">
        <input type="email" class="form-control" placeholder="请输入邮箱" name="email">
      </div>
      <div class="col">
        <input type="password" class="form-control" placeholder="请输入密码" name="pswd">
      </div>
   </div>
</form>
    尝试一下
    如果要减少网格边距（覆盖默认的列装订线）；请使用 .form-row 而不是 .row： 
    <form>
  <div class="form-row">
    <div class="col">
      <input type="email" class="form-control" placeholder="请输入邮箱" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="请输入密码" name="pswd">
    </div>
  </div>
</form>
    尝试一下

  • 表单校验

    您可以使用不同的验证类向用户提供有价值的反馈。
    将 .was-validated 或 .needs-validation 添加到 <form> 元素，具体取决于您要在提交表单之前还是之后提供验证反馈；输入字段将具有绿色（有效）或红色（无效）边框，以指示表单中缺少的内容；您还可以添加 .valid-feedback 或 .invalid-feedback 消息，以明确告知用户缺少的内容或提交表单之前需要完成的操作。
    下面示例中，我们使用 .was-validated 来指示提交表单之前缺少的内容： 
    <form class="was-validated">
  <div class="form-group">
    <label for="uname">用户名:</label>
    <input type="text" class="form-control" id="uname" placeholder="请输入用户名" name="uname" required>
    <div class="valid-feedback">验证通过</div>
    <div class="invalid-feedback">请填写此字段</div>
  </div>
  <div class="form-group">
    <label for="pwd">密码:</label>
    <input type="password" class="form-control" id="pwd" placeholder="请输入密码" name="pswd" required>
    <div class="valid-feedback">验证通过</div>
    <div class="invalid-feedback">请填写此字段</div>
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember" required> 我同意
      <div class="valid-feedback">验证通过</div>
      <div class="invalid-feedback">选中此复选框以继续</div>
    </label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>
    尝试一下
    输出结果如下：
    验证通过
    请填写此字段
    验证通过
    请填写此字段
    在下面示例中，我们使用 .needs-validation，它将在表单提交后（如果缺少任何内容）添加验证效果；请注意，您还必须添加一些jQuery代码，此示例才能正常工作： 
    <form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="uname">用户名:</label>
    <input type="text" class="form-control" id="uname" placeholder="请输入用户名" name="uname" required>
    <div class="valid-feedback">验证通过</div>
    <div class="invalid-feedback">请填写此字段</div>
  </div>
  <div class="form-group">
    <label for="pwd">密码:</label>
    <input type="password" class="form-control" id="pwd" placeholder="请输入密码" name="pswd" required>
    <div class="valid-feedback">验证通过</div>
    <div class="invalid-feedback">请填写此字段</div>
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember" required> 我同意
      <div class="valid-feedback">验证通过</div>
      <div class="invalid-feedback">选中此复选框以继续</div>
    </label>
  </div>
  <button type="submit" class="btn btn-primary">提交</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>
    尝试一下

  • 相关页面

上一节:
下一节: