Bootstrap 表单学习笔记

Bootstrap 是一个流行的前端开发框架，提供了丰富的 UI 组件和功能。表单是 Web 开发中最常用的元素之一，Bootstrap 提供了强大的表单组件，让表单开发变得更加容易和快捷。本文将介绍 Bootstrap 表单的基本用法和实例。

基本表单

Bootstrap 表单由 HTML <form> 元素包裹，并包含若干表单元素（如输入框、下拉框等）。下面展示一个基本的 Bootstrap 表单：

htmlCopy Code
<form>
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name">
  </div>
  <div class="form-group">
    <label for="email">邮箱</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

在上面的代码中，<form> 元素包含了三个表单元素（姓名输入框、邮箱输入框和密码输入框），每个表单元素都被包裹在一个 div 元素中，并使用了 .form-group 类。.form-group 类让表单元素和标签有更好的结构和排版。输入框使用了 .form-control 类，该类提供了统一的样式和布局。最后还有一个提交按钮，使用了 .btn 和 .btn-primary 类，分别提供了按钮的基本样式和主题色。

表单验证

Bootstrap 表单还提供了表单验证功能，可以通过添加一些属性和类来实现。下面展示一个简单的例子：

htmlCopy Code
<form>
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name" required>
    <div class="invalid-feedback">
      请填写姓名。
    </div>
  </div>
  <div class="form-group">
    <label for="email">邮箱</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">
      请填写有效的邮箱地址。
    </div>
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" class="form-control" id="password" minlength="6" required>
    <div class="invalid-feedback">
      密码长度不能少于 6 个字符。
    </div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

在上面的代码中，每个表单元素都添加了 required 属性，表示该元素必填。同时，每个表单元素还包含了一个 div 元素，该元素使用了 invalid-feedback 类，表示该元素填写内容不合法时的提示信息。密码输入框还添加了 minlength 属性，表示密码长度不能少于 6 个字符。

水平表单

Bootstrap 表单默认是竖直排列的，如果希望表单水平排列，可以使用 .form-horizontal 类。下面展示一个例子：

htmlCopy Code
<form class="form-horizontal">
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">姓名</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="name">
    </div>
  </div>
  <div class="form-group">
    <label for="email" class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email">
    </div>
  </div>
  <div class="form-group">
    <label for="password" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </div>
</form>

在上面的代码中，.form-horizontal 类被添加到了 <form> 元素上。每个表单元素都使用了 .col-sm-2 和 .col-sm-10 类，表示标签和输入框各占据 2 和 10 个网格。提交按钮还添加了一个 .col-sm-offset-2 类，表示偏移了 2 个网格。

结语

以上是 Bootstrap 表单的基本用法和实例。Bootstrap 还提供了很多高级的表单组件和功能，如日期选择器、下拉框搜索等。如果您希望了解更多，请参考 Bootstrap 官方文档。