在 Bootstrap 5 中，表单组件的设计旨在帮助开发者快速创建响应式、现代的表单。Bootstrap 提供了一组强大的表单元素、布局和验证工具，能够简化表单的创建和美化过程。

1. 表单基本结构

Bootstrap 5 中的表单由多个元素组成，包括输入框、选择框、文本区域、按钮等。以下是一个简单的表单结构示例：

<form>
  <div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name" placeholder="Enter your name">
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" placeholder="Enter your email">
  </div>
  <div class="mb-3">
    <label for="message" class="form-label">Message</label>
    <textarea class="form-control" id="message" rows="3" placeholder="Enter your message"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
  • .mb-3：用于为每个表单元素提供底部边距。
  • .form-label：给表单元素添加标签。
  • .form-control：这是用于表单输入框的类，定义了输入框的样式。

2. 表单输入类型

Bootstrap 5 支持多种类型的表单输入元素，如文本框、密码框、日期选择器等。

文本框

<input type="text" class="form-control" placeholder="Enter your name">

密码框

<input type="password" class="form-control" placeholder="Enter your password">

电子邮件框

<input type="email" class="form-control" placeholder="Enter your email">

日期选择器

<input type="date" class="form-control">

数字输入

<input type="number" class="form-control" placeholder="Enter a number">

颜色选择器

<input type="color" class="form-control" value="#ff0000">

复选框和单选框

<div class="mb-3">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input">
    Check me out
  </label>
</div>


<div class="mb-3">
  <label class="form-check-label">
    <input type="radio" name="exampleRadios" class="form-check-input" value="option1">
    Option 1
  </label>
</div>

3. 表单组

你可以使用表单组来组织表单中的输入元素。

示例：文本框组

<div class="mb-3">
  <label for="email" class="form-label">Email</label>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="email" class="form-control" id="email" placeholder="Email">
  </div>
</div>
  • .input-group：将多个表单元素组合为一个输入组。
  • .input-group-text：用于添加文本或图标到输入框旁边。

示例：按钮组

<div class="mb-3">
  <label class="form-label">Options</label>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-secondary">Option 1</button>
    <button type="button" class="btn btn-secondary">Option 2</button>
    <button type="button" class="btn btn-secondary">Option 3</button>
  </div>
</div>

4. 选择框（Select）

使用 <select> 标签创建下拉选择框。

<div class="mb-3">
  <label for="country" class="form-label">Country</label>
  <select class="form-select" id="country">
    <option selected>Select a country</option>
    <option value="1">USA</option>
    <option value="2">Canada</option>
    <option value="3">Australia</option>
  </select>
</div>
  • .form-select：用于美化下拉框。

5. 文本区域

使用 <textarea> 创建多行输入框（文本区域）。

<div class="mb-3">
  <label for="message" class="form-label">Message</label>
  <textarea class="form-control" id="message" rows="3"></textarea>
</div>
  • rows="3"：控制文本区域的行数。

6. 表单验证

Bootstrap 5 提供了简单的表单验证功能，可以通过 HTML5 的表单验证与 Bootstrap 样式结合使用。

示例：基本验证

<form>
  <div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name" required>
    <div class="invalid-feedback">
      Please provide a name.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
  • required：强制字段必填。
  • .invalid-feedback：当输入无效时，显示错误信息。

示例：自定义验证

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" required>
    <div class="invalid-feedback">
      Please enter a username.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</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>
  • .needs-validation：启用自定义验证。
  • .was-validated：显示表单验证结果。

7. 表单布局

垂直布局（默认）

<form>
  <div class="mb-3">
    <label for="first-name" class="form-label">First Name</label>
    <input type="text" class="form-control" id="first-name">
  </div>
  <div class="mb-3">
    <label for="last-name" class="form-label">Last Name</label>
    <input type="text" class="form-control" id="last-name">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

水平布局（需要使用 .row 和 .col）

<form>
  <div class="row mb-3">
    <label for="first-name" class="col-sm-2 col-form-label">First Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="first-name">
    </div>
  </div>
  <div class="row mb-3">
    <label for="last-name" class="col-sm-2 col-form-label">Last Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="last-name">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
  • .row：创建行。
  • .col-sm-2：设置列宽度。

8. 总结

Bootstrap 5 提供了丰富的表单组件和工具，可以帮助你创建美观、功能强大的表单。通过使用适当的类，开发者可以轻松控制表单的布局、输入类型、验证、样式等方面。使用 Bootstrap 5 表单，你可以：

  • 快速创建响应式表单。
  • 自定义表单验证和反馈。
  • 使用表单组来组合输入元素。
  • 利用网格系统进行灵活的表单布局。

通过这些工具，创建现代化的表单变得更加简单。