Skip to content

建立 2026-09-15 更新 2026-09-15

表單

表單控制項用 form-controlform-selectform-check 統一外觀,對應官方 Forms。標籤的 for 要對上輸入框的 id,點文字才能聚焦欄位。

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" placeholder="you@example.com">
  </div>
  <div class="mb-3">
    <label for="topic" class="form-label">主題</label>
    <select class="form-select" id="topic">
      <option>一般詢問</option>
      <option>報名</option>
    </select>
  </div>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="agree">
    <label class="form-check-label" for="agree">我已閱讀條款</label>
  </div>
  <button type="submit" class="btn btn-primary">送出</button>
</form>

欄位之間用 mb-3 留白,就是 間距 的日常用法。兩欄並排時把欄位放進 row + col-md-6,不要再用已移除的 form-row

前綴/後綴(例如輸入框左邊的 @)用 Input group。驗證樣式見官方 Validation

推薦影音

來源:The Net Ninja 約 14 分鐘

示範 label、control、select、textarea 與 input group 搭配圖示。