表單 (Forms)
用於創建各種表單控制樣式、排版選項和自訂元件的範例和使用指南。
概觀
Bootstrap 的表單控制與 Class 一起在 我們的重置表單樣式 上作延伸。使用這些 Class 來選擇自訂顯示，以便在瀏覽器和設備之間進行更一致的呈現。
確保在輸入框上使用正確的 type 屬性（例如，email 用於電子郵件地址或 number 用於數字信息），以利用較新的輸入控制，如電子郵件驗證、號碼選擇等。
以下是 Bootstrap 表單樣式的一個簡單範例。 繼續閱讀有關所需要的 Class 、表單佈局等的文檔。
<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。如果表單文字使用的是塊級元素，則會添加一個上邊距，以便輕鬆的與上方的輸入框隔開。
<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 類別)
<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" 向輔助技術傳達其狀態。
<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) 將有利於輔助技術使用者，但對於某些用戶而言缺少可見的標籤文字仍然可能會帶來問題。對於親和性與可用性來說，某些形式的可見標籤通常是最佳方法。
Sass
Many form variables are set at a general level to be re-used and extended by individual form components. You’ll see these most often as $btn-input-* and $input-* variables.
Variables
$btn-input-* variables are shared global variables between our buttons and our form components. You’ll find these frequently reassigned as values to other component-specific variables.
$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;