表单控件 Forms

Bootstrap 5.3 Forms 表单预览介绍

Bootstrap 5.3 提供了一套强大、灵活且易于使用的表单控件和布局工具，帮助开发者快速构建美观、响应式且功能丰富的表单界面。无论是简单的登录框还是复杂的数据录入表单，Bootstrap 都能提供出色的支持和定制能力。

1. Overview (概述)

Bootstrap 的表单系统通过一系列样式类（CSS classes） 和 HTML 结构来控制和美化原生表单元素。Bootstrap 5.3 的表单控件默认采用响应式设计，其样式主要基于表单元素本身的尺寸和类进行渲染，减少了对特定HTML结构的依赖。

表单元素 <input>, <textarea>, 和 <select> 在使用 .form-control 类的情况下，宽度默认设置为 100%。Bootstrap 提供了两种主要的表单布局：堆叠表单（垂直布局） 和 内联表单（水平布局）。

2. Form control (表单控件)

Bootstrap 为各种表单控件提供了统一的样式类，确保视觉一致性和良好的用户体验。

基本使用

为 <input>, <textarea>, 和 <select> 元素添加 .form-control 类即可应用 Bootstrap 的默认样式：

<input type="text" class="form-control" id="exampleInput" placeholder="请输入内容">
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>

控件尺寸

除了默认尺寸，Bootstrap 还提供了 大号 (.form-control-lg) 和 小号 (.form-control-sm) 两种尺寸选项：

<input type="text" class="form-control form-control-lg" placeholder="大号输入框">
<input type="text" class="form-control" placeholder="默认输入框">
<input type="text" class="form-control form-control-sm" placeholder="小号输入框">

其他变体

• 纯文本显示：使用 .form-control-plaintext 类可以删除输入框的默认样式，使其呈现为纯文本形式。
• 颜色选择器：使用 type="color" 并添加 .form-control 或 .form-control-color 类来创建颜色选择器。
• 禁用与只读：通过添加 disabled 或 readonly HTML 属性来设置表单控件的禁用或只读状态。

3. Select (选择菜单)

Bootstrap 5 使用 .form-select 类来美化 <select> 元素，替代了旧版本的 .form-control 用于选择菜单的做法。

基本选择菜单

<select class="form-select" aria-label="Default select example">
  <option selected>请选择...</option>
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
</select>

选择菜单尺寸

与表单控件类似，选择菜单也支持 大号 (.form-select-lg) 和 小号 (.form-select-sm) 尺寸：

<select class="form-select form-select-lg">...</select>
<select class="form-select">...</select>
<select class="form-select form-select-sm">...</select>

禁用选项

在 <option> 标签中添加 disabled 属性可以禁用该选项：

<option disabled>禁用选项</option>

选项分组

使用 <optgroup> 标签可以对选择菜单中的选项进行分组：

<select class="form-select">
  <option selected>请选择一个选项</option>
  <optgroup label="第一组">
    <option value="1.1">选项 1.1</option>
    <option value="1.2">选项 1.2</option>
  </optgroup>
  <optgroup label="第二组">
    <option value="2.1">选项 2.1</option>
    <option value="2.2">选项 2.2</option>
  </optgroup>
</select>

4. Checks & radios (复选框与单选按钮)

Bootstrap 为复选框（checkboxes）和单选按钮（radio buttons）提供了特殊的样式类和结构。

基本结构

复选框和单选按钮需要使用特定的HTML结构，并添加 .form-check、.form-check-input 和 .form-check-label 类：

<!-- 复选框 -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    默认复选框
  </label>
</div>

<!-- 单选按钮 -->
<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">
    默认单选按钮
  </label>
</div>

布局选项

• 内联排列：在 .form-check 容器上添加 .form-check-inline 类可以使多个复选框或单选按钮水平排列。
• 禁用状态：在 <input> 元素上添加 disabled 属性可以禁用复选框或单选按钮。

自定义样式

你可以通过自定义 CSS 来覆盖 Bootstrap 的默认样式，例如改变单选框的大小、形状和颜色：

<style>
.custom-radio .form-check-input {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ccc;
}

.custom-radio .form-check-input:checked {
  background-color: #007bff;
  border-color: #007bff;
}
</style>

<div class="form-check custom-radio">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    自定义单选框
  </label>
</div>

5. Range (范围滑块)

Bootstrap 使用 .form-range 类来美化 <input type="range"> 元素。

基本范围滑块

<label for="customRange" class="form-label">自定义范围</label>
<input type="range" class="form-range" id="customRange">

自定义属性

范围滑块支持使用 min, max 和 step 属性来定义取值范围和步进值：

<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange">

6. Input group (输入组)

输入组允许你在表单控件的前面、后面或前后同时添加额外的文本、按钮或其它元素，用于创建复杂的输入控件。

基本结构

输入组的基本结构由一个 .input-group 容器和其中的表单控件及附加元素组成：

<div class="input-group">
  <span class="input-group-text">@</span> <!-- 前置元素 -->
  <input type="text" class="form-control" placeholder="Username" aria-label="Username">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username">
  <span class="input-group-text">@example.com</span> <!-- 后置元素 -->
</div>

按钮附加元素

除了文本，你还可以在输入组中添加按钮：

<div class="input-group">
  <button class="btn btn-outline-secondary" type="button">按钮</button>
  <input type="text" class="form-control" placeholder="Some value">
</div>

下拉菜单附加元素

输入组也支持添加下拉菜单：

<div class="input-group">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    下拉菜单
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">选项一</a></li>
    <li><a class="dropdown-item" href="#">选项二</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

尺寸控制

输入组支持 大号 (.input-group-lg) 和 小号 (.input-group-sm) 两种尺寸：

<div class="input-group input-group-lg">...</div>
<div class="input-group input-group-sm">...</div>

7. Floating labels (浮动标签)

浮动标签是 Bootstrap 5 中引入的一个功能，它提供了一个简洁而优雅的方式来处理表单标签和占位符。

基本用法

浮动标签需要将 <input> 和 <label> 元素包裹在一个 .form-floating 容器中，并且 <input> 必须排在第一位：

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email&nbsp;protected]">
  <label for="floatingInput">邮箱地址</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">密码</label>
</div>

自定义样式

你可以通过覆盖 Bootstrap 的 CSS 变量或类来自定义浮动标签的行为和外观。例如，调整标签浮动后的位置：

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
  opacity: .65;
  transform: scale(.85) translateY(-2rem) translateX(.15rem); /* 调整 translateY 的值 */
  background: white; /* 添加背景色以提高可读性 */
}

8. Layout (表单布局)

Bootstrap 提供了灵活的方式来控制表单的布局，适应不同的设计需求。

堆叠表单（垂直布局）

这是默认的表单布局方式，表单项垂直堆叠排列：

<form>
  <div class="mb-3">
    <label for="email" class="form-label">邮箱地址</label>
    <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">密码</label>
    <input type="password" class="form-control" id="password" placeholder="请输入密码">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="remember">
    <label class="form-check-label" for="remember">记住我</label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

内联表单（水平布局）

如果你希望表单元素水平排列，可以使用栅格系统（Grid system）来实现：

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="请输入邮箱" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="请输入密码" name="pswd">
    </div>
    <div class="col">
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </div>
</form>

9. Validation (表单验证)

Bootstrap 5 提供了客户端表单验证的样式和简单的 JavaScript 支持，可以轻松地为表单添加验证状态和反馈信息。

基本验证

要实现表单验证，需要：

1. 在 <form> 标签上添加 .needs-validation 类和 novalidate 属性。
2. 为需要验证的表单控件添加 required 或其他验证属性。
3. 为每个需要显示验证信息的控件添加 .invalid-feedback 或 .valid-feedback 元素。

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validationCustom01" class="form-label">姓名</label>
    <input type="text" class="form-control" id="validationCustom01" required>
    <div class="invalid-feedback">
      请输入您的姓名。
    </div>
  </div>
  <div class="mb-3">
    <label for="validationCustom02" class="form-label">邮箱</label>
    <input type="email" class="form-control" id="validationCustom02" required>
    <div class="invalid-feedback">
      请输入有效的邮箱地址。
    </div>
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">同意条款和条件</label>
      <div class="invalid-feedback">
        您必须同意条款才能提交。
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">提交表单</button>
</form>

JavaScript 验证

需要添加 JavaScript 代码来启用表单验证功能：

// 获取所有需要验证的表单
var forms = document.querySelectorAll('.needs-validation');

// 循环并为每个表单添加提交事件监听器
Array.prototype.slice.call(forms).forEach(function(form) {
  form.addEventListener('submit', function(event) {
    if (!form.checkValidity()) {
      event.preventDefault(); // 阻止表单提交
      event.stopPropagation(); // 阻止事件冒泡
    }
    form.classList.add('was-validated'); // 添加验证样式类
  }, false);
});

服务器端验证

如果表单数据需要经过服务器端验证，Bootstrap 也提供了相应的样式支持：

<div class="mb-3">
  <label for="serverValidated" class="form-label">用户名</label>
  <input type="text" class="form-control is-invalid" id="serverValidated" aria-describedby="serverFeedback">
  <div id="serverFeedback" class="invalid-feedback">
    该用户名已被占用。
  </div>
</div>

Bootstrap 5.3 的表单系统提供了一套完整、灵活且易于使用的工具，用于创建各种类型的表单界面。从基本的表单控件到复杂的布局和验证功能，Bootstrap 都能提供良好的支持和一致的视觉体验。

核心优势：

• 一致性：所有表单控件具有统一的视觉风格和交互行为。
• 响应式：表单布局能够自适应不同屏幕尺寸。
• 可访问性：遵循可访问性最佳实践，确保所有用户都能使用表单。
• 定制性：通过 CSS 变量和实用工具类，可以轻松定制表单的外观和行为。

实用技巧：

1. 充分利用工具类：Bootstrap 提供了大量的间距（如 mb-3）、文本对齐（如 text-center）和显示（如 d-flex）等工具类，可以快速调整表单布局和外观。
2. 结合栅格系统：使用 Bootstrap 的栅格系统可以创建复杂的表单布局，特别是在需要水平排列表单项时。
3. 渐进增强：即使 JavaScript 被禁用，Bootstrap 的表单仍然基本可用，但某些功能（如自定义验证）可能会受到影响。

通过掌握 Bootstrap 5.3 的表单系统，你可以快速构建出既美观又功能完善的用户输入界面，大大提升开发效率和用户体验。