表單概覽（Overview）
Bootstrap表單控件樣式、布局選項和用于創建各種表單的自定義組件的示例和使用指南。
概述
Bootstrap的表單控件擴展了我們用類重置的表單樣式。使用這些類可以選擇自定義顯示，以便在瀏覽器和設備之間實現更一致的呈現。
確保對所有輸入使用適當的類型屬性（例如，電子郵件地址或數字信息的號碼），以利用新的輸入控件，如電子郵件驗證、號碼選擇等。
下面是一個演示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設置樣式。如果要使用塊級元素，則會添加上邊距，以便與上面的輸入隔開。
<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 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，這意味著它們仍然可以使用鍵盤進行聚焦和操作。在這種情況下，您必須手動修改這些控件，方法是添加 you must manually modify these controls by adding tabindex="-1" to prevent them from receiving focus
以防止它們接收焦點，并添加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>元素上可訪問名稱的后備。本節中的示例提供了一些建議的、針對具體情況的方法。
雖然使用視覺隱藏的內容（code>.visually-hidden, aria-label,
甚至占位符內容placeholder，一旦表單字段有內容就會消失）將有利于輔助技術用戶，但是缺少可見標簽文本對于某些用戶來說仍然是個問題。某種形式的可見標簽通常是最好的方法，無論是對于可訪問性還是可用性。
Sass
許多表單變量被設置在一個通用級別上，以便由單個表單組件重用和擴展。您經常會看到 $btn-input-* and $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;