表單

用於建立各種表單的表單控制樣式、版面選項和自訂元件範例和使用指南。

此頁面

表單控制 以支援多種狀態的樣式，輸入文字和文字區域。

選取使用自訂初始外觀，改善瀏覽器預設的選取元素。

核取方塊和圓形按鈕 在表單中使用我們的自訂圓形按鈕和核取方塊，以選取輸入選項。

範圍使用我們的自訂版本，取代瀏覽器預設的範圍輸入。

輸入群組 將標籤和按鈕附加到您的輸入，以增加語意值。

浮動標籤 建立美觀簡潔的表單標籤，讓標籤浮動在您的輸入欄位上方。

版面配置 使用表單建立內嵌、水平或複雜的網格版面配置。

驗證使用自訂或原生驗證行為和樣式驗證表單。

概觀

Bootstrap 的表單控制項透過類別擴充我們的重新整理表單樣式。使用這些類別選擇自訂顯示，以在不同瀏覽器和裝置中獲得更一致的呈現。

務必對所有輸入使用適當的 type 屬性（例如，電子郵件地址的 email 或數字資訊的 number），以利用電子郵件驗證、數字選取等更新的輸入控制項。

以下是一個快速範例，用來示範 Bootstrap 的表單樣式。繼續閱讀以取得關於必要類別、表單版面配置等文件的說明。

html

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

停用的表單

在輸入中加入 disabled 布林屬性，以防止使用者互動並使它看起來較淡。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

將 disabled 屬性新增至 <fieldset> 以停用其中的所有控制項。瀏覽器會將 <fieldset disabled> 內的所有原生表單控制項（<input>、<select> 和 <button> 元素）視為已停用，並禁止使用鍵盤和滑鼠與其互動。

不過，如果表單中也包含自訂按鈕狀元素，例如 <a class="btn btn-*">...</a>，這些元素只會套用 pointer-events: none 樣式，表示它們仍可透過鍵盤取得焦點和操作。在此情況下，您必須手動修改這些控制項，新增 tabindex="-1" 以防止它們取得焦點，並新增 aria-disabled="disabled" 以傳達其狀態給輔助技術。

html

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

無障礙

請確保所有表單控制項都有適當的無障礙名稱，以便輔助技術使用者可以了解其目的。最簡單的方法是使用 <label> 元素，或者在按鈕的情況下，將足夠說明性的文字納入 <button>...</button> 內容中。

在無法納入可見 <label> 或適當文字內容的情況下，仍有其他提供無障礙名稱的方法，例如

使用 .visually-hidden 類別隱藏的 <label> 元素
使用 aria-labelledby 指向可作為標籤的現有元素
提供 title 屬性
使用 aria-label 明確設定元素上的可存取名稱

如果這些都沒有，輔助技術可能會使用 placeholder 屬性作為 <input> 和 <textarea> 元素上可存取名稱的後備選項。本節中的範例提供了一些建議的特定案例方法。

雖然使用視覺上隱藏的內容（.visually-hidden、aria-label，甚至 placeholder 內容，一旦表單欄位有內容就會消失）將使輔助技術使用者受益，但對於某些使用者而言，缺乏可見標籤文字仍可能造成問題。某種形式的可見標籤通常是最佳方法，無論是針對可存取性或可用性而言。

CSS

許多表單變數設定在一般層級，以便個別表單元件重複使用和延伸。您最常會看到這些變數為 $input-btn-* 和 $input-*。

Sass 變數

$input-btn-* 變數是我們的按鈕和表單元件之間共用的全域變數。您會發現這些變數經常重新指定為其他元件特定變數的值。

scss/_variables.scss

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         $focus-ring-width;
$input-btn-focus-color-opacity: $focus-ring-opacity;
$input-btn-focus-color:         $focus-ring-color;
$input-btn-focus-blur:          $focus-ring-blur;
$input-btn-focus-box-shadow:    $focus-ring-box-shadow;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      var(--#{$prefix}border-width);