Bootstrap 中的表单控件

Bootstrap 是一个流行的前端框架，可以帮助我们快速搭建美观的网站。在 Bootstrap 中，提供了丰富的表单控件，可以方便地创建各种表单界面。

表单基础

在 Bootstrap 中，表单控件包括了输入框、下拉框、按钮等。下面是一个基本的表单示例，包含了文本框、密码框、下拉框、单选框和复选框。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">我们绝不会向其他人透露您的邮箱地址。</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">选择</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>选项 1</option>
      <option>选项 2</option>
      <option>选项 3</option>
      <option>选项 4</option>
      <option>选项 5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlRadio1">单选框</label>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
      <label class="form-check-label" for="exampleRadios1">
        选项 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
      <label class="form-check-label" for="exampleRadios2">
        选项 2
      </label>
    </div>
  </div>
  <div class="form-group">
    <label for="exampleFormControlCheck1">复选框</label>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
      <label class="form-check-label" for="defaultCheck1">
        默认复选框
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
      <label class="form-check-label" for="defaultCheck2">
        已禁用的复选框
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

表单元素大小

在 Bootstrap 中，我们可以根据需要调整不同的表单元素大小。下面是一个示例，展示了三种不同大小的输入框：

<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  </div>
  <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  </div>
  <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  </div>
  <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-lg">
</div>

水平表单

我们也可以创建水平排列的表单，可以使表单更加紧凑。下面是一个示例：

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">单选框</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            选项 1
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            选项 2
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            已禁用的选项
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">复选框</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          选项 1
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck2">
        <label class="form-check-label" for="gridCheck2">
          选项 2
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </div>
</form>

表单验证

Bootstrap 提供了强大的表单验证功能，可以方便地对用户的输入进行验证。我们可以使用预定义的验证规则，也可以编写自定义规则。下面是一个示例代码，展示了如何在表单中使用验证规则：

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">姓名</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="姓名" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">电话</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="电话" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">用户名</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="用户名" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">城市</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="城市" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">州/省</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="州/省" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">邮编</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="邮编" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        同意协议和条件
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">提交</button>
</form>

小结

Bootstrap 提供了丰富的表单控件和功能，可以方便地创建各种表单界面。我们可以根据需要调整表单元素大小，创建水平排列的表单，以及使用验证规则对用户输入进行验证。