在Web開發中，表單是收集用戶信息的重要組件。Bootstrap5提供了簡潔高效的表單樣式和驗證工具，讓我們無需從零開始設計就能快速構建美觀且功能完善的表單。本文將從基礎輸入框、下拉菜單到表單驗證，一步步帶你掌握Bootstrap5表單的核心用法。
爲什麼用Bootstrap做表單？¶
Bootstrap5的表單組件通過預定義的CSS類，能快速美化表單元素，同時支持響應式佈局（適配手機、平板、電腦）。相比純HTML/CSS寫表單，Bootstrap可以大幅減少樣式代碼，專注於功能實現，尤其適合初學者快速上手。
一、基礎輸入框：讓表單更整潔¶
輸入框是表單最基礎的元素，Bootstrap通過簡單的類名就能讓輸入框擁有現代感的樣式。
1. 基本輸入框結構¶
一個標準的Bootstrap輸入框需要包含標籤（Label） 和輸入框（Input），並通過類名優化樣式和間距。
示例代碼：
<div class="mb-3">
<label for="username" class="form-label">用戶名</label>
<input type="text" class="form-control" id="username" placeholder="請輸入用戶名">
</div>
form-label：給標籤添加樣式，使其更清晰易讀。form-control：輸入框的核心樣式類，提供邊框、圓角、內邊距等，讓輸入框更美觀。mb-3：margin-bottom縮寫，用於控制輸入框與下方元素的間距（3代表間距大小，數字越大間距越大）。id與for：必須對應，用於關聯標籤和輸入框，點擊標籤時自動聚焦到輸入框。placeholder：輸入框內的提示文字，引導用戶填寫內容。
2. 不同類型的輸入框¶
只需修改type屬性，就能實現不同功能的輸入框，Bootstrap的form-control類通用支持：
- 文本框：type="text"（默認，用於普通文字）
- 密碼框：type="password"（輸入內容隱藏）
- 郵箱：type="email"（自動驗證郵箱格式，提交時提示錯誤）
- 數字：type="number"（限制只能輸入數字，支持min/max屬性）
- 日期：type="date"（彈出日期選擇器）
示例：
<div class="mb-3">
<label for="email" class="form-label">郵箱</label>
<input type="email" class="form-control" id="email" placeholder="your@email.com">
</div>
<div class="mb-3">
<label for="age" class="form-label">年齡</label>
<input type="number" class="form-control" id="age" min="1" max="120" placeholder="請輸入年齡">
</div>
二、下拉菜單：豐富表單選項¶
下拉菜單常用於需要用戶從預設選項中選擇的場景（如性別、職業、地區等）。Bootstrap5通過form-select類簡化了下拉菜單的樣式。
1. 基礎下拉菜單¶
只需將<select>標籤添加form-select類，即可獲得Bootstrap風格的下拉菜單：
<div class="mb-3">
<label for="gender" class="form-label">性別</label>
<select class="form-select" id="gender">
<option>請選擇</option>
<option>男</option>
<option>女</option>
<option>保密</option>
</select>
</div>
form-select：讓下拉菜單（<select>）擁有邊框、圓角等樣式，替代原生難看的下拉框。option：下拉選項內容，第一個option通常作爲默認提示（如“請選擇”）。
2. 多選下拉菜單（需JS）¶
若需要多選功能（如選擇興趣愛好），可使用Bootstrap的下拉按鈕組，結合JavaScript實現：
<div class="mb-3">
<label class="form-label">興趣愛好</label>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="hobbies" data-bs-toggle="dropdown">
選擇興趣
</button>
<ul class="dropdown-menu" aria-labelledby="hobbies">
<li><input class="form-check-input me-2" type="checkbox" id="reading"> <label class="form-check-label" for="reading">閱讀</label></li>
<li><input class="form-check-input me-2" type="checkbox" id="sports"> <label class="form-check-label" for="sports">運動</label></li>
<li><input class="form-check-input me-2" type="checkbox" id="music"> <label class="form-check-label" for="music">音樂</label></li>
</ul>
</div>
</div>
dropdown系列類：控制下拉按鈕和菜單的展開/收起，需引入Bootstrap5的JS文件（見文末“引入Bootstrap”部分）。
三、表單驗證：確保數據正確¶
表單提交前，驗證用戶輸入的合法性（如必填項、格式錯誤）是關鍵。Bootstrap5支持HTML5原生驗證和自定義反饋樣式，無需複雜代碼即可實現基礎驗證。
1. 基礎驗證：必填項與格式檢查¶
利用HTML5的required屬性標記必填項，type屬性（如email）自動檢查格式：
<div class="mb-3">
<label for="username" class="form-label">用戶名</label>
<input type="text" class="form-control" id="username" placeholder="請輸入用戶名" required>
<!-- 錯誤提示（默認隱藏，驗證失敗時顯示） -->
<div class="invalid-feedback">用戶名不能爲空</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">郵箱</label>
<input type="email" class="form-control" id="email" placeholder="your@email.com" required>
<div class="invalid-feedback">請輸入有效的郵箱格式</div>
</div>
required：標記輸入框爲必填項，用戶未填寫時阻止表單提交。invalid-feedback：驗證失敗時顯示的錯誤提示，配合is-invalid類觸發（見下文）。
2. 手動觸發驗證狀態¶
通過JavaScript或直接添加is-valid/is-invalid類，可手動控制驗證狀態：
<div class="mb-3">
<label for="phone" class="form-label">手機號</label>
<input type="tel" class="form-control" id="phone" placeholder="11位手機號" required>
<div class="valid-feedback">格式正確</div>
<div class="invalid-feedback">請輸入11位有效手機號</div>
</div>
<script>
// 示例：點擊按鈕時驗證手機號
document.getElementById("phone").addEventListener("blur", function() {
const value = this.value.trim();
const isValid = /^1[3-9]\d{9}$/.test(value); // 簡單手機號正則
this.classList.toggle("is-valid", isValid);
this.classList.toggle("is-invalid", !isValid);
});
</script>
is-valid/is-invalid：分別標記驗證通過/失敗狀態，觸發對應valid-feedback/invalid-feedback提示。
四、綜合示例：完整表單實戰¶
以下是一個包含輸入框、下拉菜單、驗證的完整註冊表單示例：
<!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 class="row g-3">
<!-- 左側列（佔6列） -->
<div class="col-md-6">
<div class="mb-3">
<label for="username" class="form-label">用戶名</label>
<input type="text" class="form-control" id="username" placeholder="請輸入用戶名" required>
<div class="invalid-feedback">用戶名不能爲空</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">密碼</label>
<input type="password" class="form-control" id="password" placeholder="請輸入密碼" required minlength="6">
<div class="invalid-feedback">密碼長度不能少於6位</div>
</div>
</div>
<!-- 右側列（佔6列） -->
<div class="col-md-6">
<div class="mb-3">
<label for="gender" class="form-label">性別</label>
<select class="form-select" id="gender" required>
<option>請選擇</option>
<option>男</option>
<option>女</option>
</select>
</div>
<div class="mb-3">
<label for="phone" class="form-label">手機號</label>
<input type="tel" class="form-control" id="phone" placeholder="11位手機號" required>
<div class="invalid-feedback">請輸入11位有效手機號</div>
</div>
</div>
<!-- 提交按鈕 -->
<div class="col-12">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</form>
<!-- 引入Bootstrap5 JS（用於下拉菜單等交互功能） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
五、關鍵技巧總結¶
- 間距控制：使用
mb-3（下間距）、mt-2（上間距）等類調整元素間距，避免表單擁擠。 - 響應式佈局：通過
row+col-*（如col-md-6）實現多列布局，在不同屏幕下自動適配。 - 驗證狀態切換：
is-valid/is-invalid類可結合JS動態控制，提升交互體驗。 - 樣式複用：表單容器可加
row g-3實現整體間距，所有輸入框統一用form-control保證風格一致。
引入Bootstrap5¶
使用Bootstrap5需在HTML頭部引入CSS和JS（若需交互功能）：
<!-- 僅需CSS（基礎樣式） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 需交互功能（下拉菜單、模態框等）時引入JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
通過以上內容，你已掌握Bootstrap5表單的核心用法：從基礎輸入框美化，到下拉菜單擴展，再到驗證邏輯實現。多嘗試不同的輸入框類型和驗證規則，就能快速構建出專業級表單！