Skip to main content Skip to docs navigation
View on GitHub

表單 (Forms)

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

六角學院的 Bootstrap 5 課程上線囉,立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去

概觀

Bootstrap 的表單控制與 Class 一起在 我們的重置表單樣式 上作延伸。使用這些 Class 來選擇自訂顯示,以便在瀏覽器和設備之間進行更一致的呈現。

確保在輸入框上使用正確的 type 屬性(例如,email 用於電子郵件地址或 number 用於數字信息),以利用較新的輸入控制,如電子郵件驗證、號碼選擇等。

以下是 Bootstrap 表單樣式的一個簡單範例。 繼續閱讀有關所需要的 Class 、表單佈局等的文檔。

We'll never share your email with anyone else.
<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 屬性與表單控制元件明確關連,這將確保輔助技術(例如螢幕閱讀器)在用戶 focus 控制元件或輸入 input 時會宣讀此表單文字。

在輸入框底下的表單文字可以設置樣式 .form-text。如果表單文字使用的是塊級元素,則會添加一個上邊距,以便輕鬆的與上方的輸入框隔開。

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
<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 類別)

Must be 8-20 characters long.
<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>

禁用表格

在輸入框 input 加上布林屬性 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" 向輔助技術傳達其狀態。

Disabled fieldset example
<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-hiddenaria-label,甚至是當表單輸入欄位有內容時就會消失的 placeholder) 將有利於輔助技術使用者,但對於某些用戶而言缺少可見的標籤文字仍然可能會帶來問題。對於親和性與可用性來說,某些形式的可見標籤通常是最佳方法。

Sass

許多表單變數都設置在通用級別,以便由各個表單元件重新使用和擴展。你會經常看到這些作為 $btn-input-*$input-* 變數。

Variables

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