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表單系統！