表單控制樣式、版面配置選項和自訂元件的範例與使用指南，協助您建立各式各樣的表單。
概覽（Overview）
Bootstrap 的表單控制透過類別擴展了我們重設的表單樣式。使用這些類別來啟用自訂的顯示方式，以便在不同瀏覽器和裝置上獲得更一致的呈現效果。
請確保在所有輸入欄位上使用適當的 type 屬性（例如，email 用於電子郵件地址，number 用於數值資訊），以利用較新的輸入控制功能，如電子郵件驗證、數字選擇等。
以下是一個快速範例，展示 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>停用表單（Disabled forms）
在輸入欄位上加入 disabled 布林屬性，可以防止使用者互動並使其顯示較淺。
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
在 <fieldset> 上加入 disabled 屬性可以停用其中的所有控制項。瀏覽器會將 <fieldset disabled> 內的所有原生表單控制項（<input>、<select> 和 <button> 元素）視為停用狀態，防止鍵盤和滑鼠對它們的互動。
然而，如果您的表單也包含自訂的類按鈕元素，例如 <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>無障礙（Accessibility）
確保所有表單控制項都有適當的無障礙名稱，以便向輔助技術的使用者傳達其用途。最簡單的方式是使用 <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 變數（Sass variables）
$input-btn-* 變數是我們的按鈕和表單元件之間共享的全域變數。您會發現這些變數經常被重新指派作為其他元件特定變數的值。
$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);