Bootstrap 表单

  • 定义和使用

    表单控件会通过 Bootstrap 自动接收一些全局样式:
    .form-control 的所有文本<input> ,<textarea> 和 <select> 元素的宽度均为100%。
    下面的示例创建具有两个输入字段,一个复选框和一个提交按钮的堆叠表单。
    在每个窗体控件周围添加一个带有 .form-groupwrapper 元素,以确保适当的边距:
    <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>
    
    尝试一下