形式
用於創建各種表單的表單控件樣式、佈局選項和自定義組件的示例和使用指南。
概述
Bootstrap 的表單控件使用類擴展了我們的 Rebooted 表單樣式。使用這些類來選擇它們的自定義顯示,以便在瀏覽器和設備之間實現更一致的呈現。
確保在所有輸入(例如,電子郵件地址或數字信息)上使用適當的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>
表單文本
可以使用創建塊級或內聯級表單文本.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>
禁用表格
在輸入上添加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;