Bootstrap 表单

Bootstrap表单是一种常用的前端界面设计工具，可以让开发者快速、便捷地构建各种表单。本文将详细介绍Bootstrap表单的相关特性及其使用方法。

表单的基本结构

Bootstrap表单的基本框架由三个部分组成：form、fieldset、legend。其中，form表示整个表单，fieldset表示表单中的一组相关字段，legend用于对fieldset进行说明。下面是示例代码：

<form>
  <fieldset>
    <legend>联系方式</legend>
    <div>
      <label for="name">姓名：</label>
      <input id="name" type="text" name="name" required>
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input id="email" type="email" name="email" required>
    </div>
  </fieldset>
</form>

表单控件及相关样式

Bootstrap表单控件通过给HTML标签设置特定的class实现样式控制，例如“form-control”类指定了表单控件的基本样式，可以用于input、textarea、select等标签。

<input type="text" class="form-control">
<textarea class="form-control"></textarea>
<select class="form-control">

Bootstrap表单还提供了多种样式控件，如轮廓、大小、禁用、只读等等。例如，可以使用“form-control-lg”和“form-control-sm”类分别指定表单控件的大、中、小三种尺寸。

<input type="text" class="form-control form-control-lg">
<input type="text" class="form-control">
<input type="text" class="form-control form-control-sm">

此外，Bootstrap表单还提供了多种样式控件，如下拉列表（select）、单选按钮（radio）、复选框（checkbox）等等。例如，可以使用“form-check”类将单选按钮和复选框包裹在一个div中，并使用“form-check-input”类指定它们的样式。

<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 class="form-check">
  <input class="form-check-input" type="checkbox" name="exampleCheck1" id="exampleCheck1">
  <label class="form-check-label" for="exampleCheck1">同意使用条款</label>
</div>

表单的布局控制

Bootstrap表单提供了多种布局控制方式，可以让开发者轻松实现自定义的表单布局。例如，“form-row”类用于将一行表单拆分成多个样式相同的字段，而“form-inline”类可以将多个表单控件放在同一行中。除此之外，Bootstrap表单还提供了各种样式控件，如下拉列表（select）、单选按钮（radio）、复选框（checkbox）等等。例如，可以使用“form-check”类将单选按钮和复选框包裹在一个div中，并使用“form-check-input”类指定它们的样式。

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
  <div class="form-group form-check-inline">
    <input type="radio" class="form-check-input" id="male" name="gender">
    <label class="form-check-label" for="male">男性</label>
  </div>
  <div class="form-group form-check-inline">
    <input type="radio" class="form-check-input" id="female" name="gender">
    <label class="form-check-label" for="female">女性</label>
  </div>
</form>

表单的校验机制

Bootstrap表单提供了多种校验机制，可以让开发者轻松实现表单数据的合法性验证。例如，“required”属性可以指定一个表单控件不能为空，而“pattern”属性可以指定一个表单控件必须符合一个正则表达式。在输入框中输入不符合规范的内容时，输入框的底部将会显示一条错误提示信息。例如：

<form>
  <div class="form-group">
    <label for="email">邮箱：</label>
    <input id="email" type="email" class="form-control" name="email" required>
    <div class="invalid-feedback">请输入一个合法的邮箱地址。</div>
  </div>
  <div class="form-group">
    <label for="password">密码：</label>
    <input id="password" type="password" class="form-control" name="password" pattern="^[a-zA-Z]\w{5,17}$" required>
    <div class="invalid-feedback">密码格式必须以字母开头，长度在6~18之间，只能包含字母、数字和下划线。</div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">提交</button>
  </div>
</form>

总结

Bootstrap表单是一种功能强大的前端表单设计工具，可以大大简化表单的布局、样式和校验的过程。掌握Bootstrap表单的相关特性和使用方法，可以让开发者更快速、轻松地实现前端表单的开发。