Bootstrap 5 表单

以下是关于 Bootstrap 5 表单 的全面介绍。作为一名专业开发工程师，我将为您提供结构化、实用的信息，帮助您快速掌握 Bootstrap 5 中表单的使用方法，包括基本结构、控件类型、布局、验证以及自定义样式等内容。

什么是 Bootstrap 5 表单？

Bootstrap 5 是一个流行的前端框架，其表单组件基于 HTML 表单元素，提供了美观一致的样式和交互功能。Bootstrap 5 表单支持多种控件（如文本框、复选框、下拉菜单等），并通过网格系统实现响应式布局，还内置了客户端验证功能。官方文档可参考：Bootstrap 5 Forms。

1. 基本表单结构

一个基本的 Bootstrap 5 表单通常包括 <form> 标签、输入字段和提交按钮。以下是一个简单示例：

<form>
  <div class="mb-3">
    <label for="exampleInput" class="form-label">输入框</label>
    <input type="text" class="form-control" id="exampleInput" placeholder="请输入...">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

关键类说明：

  • .form-label：为 <label> 提供样式。
  • .form-control：为输入框（如 <input>、<textarea>、<select>）提供默认样式。
  • .mb-3：为表单组添加底部间距。

2. 表单控件

Bootstrap 5 支持多种表单控件，并为它们提供统一的样式。

2.1 文本框和密码框

<input type="text" class="form-control" placeholder="文本框">
<input type="password" class="form-control" placeholder="密码框">

2.2 复选框和单选按钮

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">复选框</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="radioGroup" id="radio1">
  <label class="form-check-label" for="radio1">单选按钮</label>
</div>

2.3 下拉菜单

<select class="form-select">
  <option selected>选择一个选项</option>
  <option value="1">选项 1</option>
  <option value="2">选项 2</option>
</select>

2.4 文本域

<textarea class="form-control" rows="3" placeholder="多行文本"></textarea>

3. 表单布局

Bootstrap 5 提供了灵活的布局选项，帮助创建响应式表单。

3.1 网格布局

使用 Bootstrap 的网格系统（.row 和 .col-*）排列控件：

<form>
  <div class="row">
    <div class="col-md-6">
      <input type="text" class="form-control" placeholder="姓">
    </div>
    <div class="col-md-6">
      <input type="text" class="form-control" placeholder="名">
    </div>
  </div>
</form>

3.2 行内表单

使用 .row 和 .g-3（gutter）类创建紧凑的行内表单：

<form class="row g-3">
  <div class="col-auto">
    <input type="text" class="form-control" placeholder="用户名">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">登录</button>
  </div>
</form>

4. 表单验证

Bootstrap 5 内置了表单验证样式和 JavaScript 功能，支持客户端验证。

4.1 基本验证示例

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validationInput" class="form-label">必填项</label>
    <input type="text" class="form-control" id="validationInput" required>
    <div class="invalid-feedback">此项为必填。</div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

<script>
  (function () {
    'use strict';
    const forms = document.querySelectorAll('.needs-validation');
    Array.from(forms).forEach(form => {
      form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  })();
</script>

关键点：

  • novalidate：禁用浏览器默认验证。
  • .needs-validation：标记需要验证的表单。
  • .invalid-feedback：显示错误提示。

5. 自定义样式

Bootstrap 5 允许通过 CSS 或实用类自定义表单样式。

5.1 调整控件大小

  • .form-control-lg：大型输入框。
  • .form-control-sm：小型输入框。
<input type="text" class="form-control form-control-lg" placeholder="大型输入框">

5.2 自定义颜色

通过 CSS 变量调整样式：

.form-control {
  border-color: #007bff;
}

6. 无障碍访问

设计表单时，应确保其对所有用户可访问：

  • 使用 <label> 并通过 for 属性关联 <input>。
  • 添加 aria-describedby 提供额外描述。

示例：

<input type="text" class="form-control" id="exampleInput" aria-describedby="inputHelp">
<small id="inputHelp" class="form-text text-muted">请输入您的姓名。</small>

7. 常见问题与解决方案

  • 问题：表单控件样式未应用。
    解决：检查是否正确添加了 .form-control 或 .form-check 类。
  • 问题：验证提示不显示。
    解决：确保 <form> 有 needs-validation 类，且错误提示元素存在。

8. 参考资源

总结

Bootstrap 5 表单通过预定义的类和 JavaScript 功能，提供了强大的工具来构建美观、响应式的表单。无论是基本输入框、复杂布局还是客户端验证，Bootstrap 5 都能满足需求。如果您有更具体的问题（如多步骤表单或 AJAX 提交），欢迎告诉我，我将进一步为您提供帮助！