Bootstrap5表单组：分组控件与标签对齐技巧

在网页开发中，表单是收集用户信息的核心组件。Bootstrap5提供了强大的表单工具，其中“表单组（Form Group）”是组织表单元素的基础，而“标签对齐技巧”则能让表单更美观、易用。本文将从基础用法到进阶技巧，手把手教你掌握Bootstrap5表单组的核心应用。

一、什么是表单组？¶

表单组是一组相关表单控件（如标签、输入框、按钮等）的集合，通过Bootstrap的.form-group类包裹，可实现统一的样式管理和布局控制。它能让表单结构更清晰，提升用户体验，同时避免样式混乱。

二、基础用法：快速创建表单组¶

1. 基本结构
使用.form-group包裹<label>和表单控件（如输入框、单选框等），并通过for和id属性关联标签与控件（提升可访问性）。

<div class="form-group mb-3"> <!-- mb-3：底部添加间距 -->
  <label for="username" class="form-label">用户名</label>
  <input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>

关键说明：
- .form-label：为标签添加Bootstrap样式（默认左对齐，与输入框等高）。
- .form-control：为输入框等控件添加基础样式（边框、圆角、阴影等）。
- mb-3：Bootstrap的间距工具类，m代表margin，b代表bottom，3是预设的间距大小（可根据需求调整为mb-2或mb-4）。

三、标签对齐技巧：让表单更整洁¶

Bootstrap5提供多种标签对齐方式，可根据页面布局需求选择：

1. 水平排列（标签+输入框在同一行）¶

通过.row和.col-*类实现标签与输入框水平排列，并控制宽度比例。

<form>
  <div class="row mb-3"> <!-- 行容器 -->
    <!-- 标签列：占2列（总12列） -->
    <label for="email" class="col-sm-2 col-form-label text-end">邮箱</label>
    <!-- 输入框列：占10列 -->
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="your@email.com">
    </div>
  </div>

  <div class="row mb-3">
    <label for="password" class="col-sm-2 col-form-label text-end">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password" placeholder="请设置密码">
    </div>
  </div>
</form>

对齐关键：
- .row：将内容包裹在行内，实现水平布局。
- .col-sm-2/.col-sm-10：通过网格系统控制列宽（sm表示小屏幕及以上生效）。
- .text-end：标签文字右对齐（可选，需左对齐可省略）。

2. 浮动标签（现代交互风格）¶

使用.form-floating类，输入框获得焦点时标签自动“浮动”到输入框上方，适合移动端或简洁界面。

<div class="form-floating mb-3">
  <input type="text" class="form-control" id="floatingName" placeholder=" ">
  <label for="floatingName">姓名</label>
</div>

<div class="form-floating">
  <textarea class="form-control" id="floatingDesc" rows="3" placeholder=" "></textarea>
  <label for="floatingDesc">个人简介</label>
</div>

特点：无需额外设置间距，输入框与标签自动适配，支持多行文本（textarea）。

3. 垂直排列（标签在输入框上方）¶

默认情况下，表单组为垂直排列，标签在输入框上方，适合短表单或移动端。

<div class="form-group mb-3">
  <label for="phone" class="form-label">手机号</label>
  <input type="tel" class="form-control" id="phone" placeholder="138****1234">
  <div class="form-text">请输入11位有效手机号</div> <!-- 辅助说明文本 -->
</div>

说明：.form-text用于补充说明（如输入提示、限制条件），自动适配灰色字体。

四、分组控件：管理同类选项¶

当表单包含单选按钮、多选框或下拉菜单时，需将同类控件分组，避免样式分散。

1. 单选按钮组¶

用.form-check包裹多个单选按钮，实现“互斥选择”效果：

<div class="form-group mb-3">
  <label class="form-label">性别</label>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gender" id="male" value="male">
    <label class="form-check-label" for="male">男</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gender" id="female" value="female">
    <label class="form-check-label" for="female">女</label>
  </div>
</div>

关键点：
- name="gender"：相同name的单选按钮互斥（同一组只能选一个）。
- .form-check-input：单选按钮默认样式（选中后有蓝色圆点）。

2. 多选按钮组¶

类似单选，仅需将type="radio"改为type="checkbox"：

<div class="form-group mb-3">
  <label class="form-label">兴趣爱好</label>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" name="hobby" id="reading" value="reading">
    <label class="form-check-label" for="reading">阅读</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" name="hobby" id="sports" value="sports">
    <label class="form-check-label" for="sports">运动</label>
  </div>
</div>

3. 下拉菜单组¶

用.form-select包裹下拉选项，替代原生<select>：

<div class="form-group mb-3">
  <label for="city" class="col-sm-2 col-form-label">城市</label>
  <div class="col-sm-10">
    <select class="form-select" id="city">
      <option>北京</option>
      <option>上海</option>
      <option>广州</option>
    </select>
  </div>
</div>

五、完整示例：整合所有技巧¶

以下是一个包含水平排列、浮动标签、单选组和下拉菜单的完整注册表单：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap5表单组示例</title>
  <!-- 引入Bootstrap5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
  <form>
    <!-- 水平排列：用户名 -->
    <div class="row mb-3">
      <label for="username" class="col-sm-2 col-form-label">用户名</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="username" placeholder="请输入用户名">
      </div>
    </div>

    <!-- 浮动标签：邮箱 -->
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="floatingEmail">
      <label for="floatingEmail">邮箱</label>
    </div>

    <!-- 单选组：性别 -->
    <div class="form-group mb-3">
      <label class="form-label">性别</label>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gender" id="male" value="male">
        <label class="form-check-label" for="male">男</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gender" id="female" value="female">
        <label class="form-check-label" for="female">女</label>
      </div>
    </div>

    <!-- 下拉菜单：城市 -->
    <div class="row mb-3">
      <label for="city" class="col-sm-2 col-form-label">城市</label>
      <div class="col-sm-10">
        <select class="form-select" id="city">
          <option>北京</option>
          <option>上海</option>
          <option>广州</option>
        </select>
      </div>
    </div>
  </form>

  <!-- 引入Bootstrap5 JS（需交互功能时添加） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

六、总结¶

表单组核心：用.form-group包裹标签与控件，实现样式统一。
标签对齐：根据场景选择水平排列（.row/.col-*）、浮动标签（.form-floating）或垂直排列（默认）。
分组控件：用.form-check管理单选/多选，.form-select实现下拉菜单，保持同类选项视觉连贯。

通过以上技巧，你可以快速构建美观、易用的表单，提升用户体验。建议多结合实际项目练习不同对齐方式，熟练掌握Bootstrap5表单系统！