形式

用於創建各種表單的表單控件樣式、佈局選項和自定義組件的示例和使用指南。

在本頁面

表單控件 樣式文本輸入和文本區域，支持多種狀態。

選擇使用自定義初始外觀改進瀏覽器默認選擇元素。

支票和收音機 在表單中使用我們的自定義單選按鈕和復選框來選擇輸入選項。

範圍用我們的自定義版本替換瀏覽器默認範圍輸入。

輸入組 將標籤和按鈕附加到您的輸入以增加語義價值。

浮動標籤 創建浮動在輸入字段上的精美簡單的表單標籤。

佈局使用您的表單創建內聯、水平或複雜的基於網格的佈局。

驗證使用自定義或本機驗證行為和样式驗證您的表單。

概述

Bootstrap 的表單控件使用類擴展了我們的 Rebooted 表單樣式。使用這些類來選擇它們的自定義顯示，以便在瀏覽器和設備之間實現更一致的呈現。

確保在所有輸入（例如，電子郵件地址或數字信息）上使用適當的type屬性，以利用更新的輸入控件，如電子郵件驗證、號碼選擇等。emailnumber

這是一個演示 Bootstrap 表單樣式的快速示例。繼續閱讀有關所需類、表單佈局等的文檔。

<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>

表單文本

可以使用創建塊級或內聯級表單文本.form-text。

將表單文本與表單控件相關聯

表單文本應該與使用aria-describedby屬性相關的表單控件顯式關聯。這將確保輔助技術（例如屏幕閱讀器）在用戶聚焦或進入控件時宣布此表單文本。

輸入下方的表單文本可以使用.form-text. 如果將使用塊級元素，則會添加上邊距以便與上面的輸入保持間距。

密碼

您的密碼長度必須為 8-20 個字符，包含字母和數字，並且不得包含空格、特殊字符或表情符號。

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

內聯文本可以使用任何典型的內聯 HTML 元素（可以是<span>、<small>或其他），只需要.form-text類。

密碼

長度必須為 8-20 個字符。

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

禁用表格

在輸入上添加disabled布爾屬性以防止用戶交互並使其看起來更輕。

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

將disabled屬性添加到 a<fieldset>以禁用其中的所有控件。瀏覽器將 a 內的所有原生表單控件（<input>、<select>和<button>元素）<fieldset disabled>視為已禁用，從而阻止了鍵盤和鼠標在它們上的交互。

但是，如果您的表單還包含自定義的類似按鈕的元素，例如<a class="btn btn-*">...</a>，則這些元素只會被賦予樣式pointer-events: none，這意味著它們仍然可以使用鍵盤聚焦和操作。在這種情況下，您必須通過添加來手動修改這些控件，tabindex="-1"以防止它們接收焦點並將aria-disabled="disabled"它們的狀態發送給輔助技術。

<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>或適當文本內容的情況，仍有其他方法可以提供可訪問的名稱，例如：

<label>.visually-hidden使用類隱藏的元素
指向可以用作標籤的現有元素aria-labelledby
提供title屬性
使用顯式設置元素的可訪問名稱aria-label

如果這些都不存在，輔助技術可能會求助於使用placeholder屬性作為可訪問名稱<input>和<textarea>元素的後備。本節中的示例提供了一些建議的、特定於案例的方法。

雖然使用視覺隱藏的內容（.visually-hidden、aria-label，甚至placeholder內容，一旦表單域有內容就會消失）將使輔助技術用戶受益，但對於某些用戶來說，缺少可見的標籤文本可能仍然是個問題。對於可訪問性和可用性而言，某種形式的可見標籤通常是最好的方法。

薩斯

許多表單變量被設置在一個通用級別，以供單個表單組件重用和擴展。你會經常看到這些$btn-input-*和$input-*變量。

變量

$btn-input-*變量是我們的按鈕和表單組件之間共享的全局變量。您會發現這些經常作為值重新分配給其他特定於組件的變量。

$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:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$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:      $border-width;