通過在文本輸入、自定義選擇和自定義文件輸入的任一側添加文本、按鈕或按鈕組來輕鬆擴展表單控件。
基本示例
在輸入的任一側放置一個附加組件或按鈕。您也可以在輸入的兩側放置一個。請記住將<label>
s 放在輸入組之外。
包裝
輸入組默認包裝通過flex-wrap: wrap
,以適應輸入組中的自定義表單字段驗證。您可以使用 禁用此功能.flex-nowrap
。
漿紗
將相對的表單大小類添加到.input-group
自身,其中的內容將自動調整大小 - 無需在每個元素上重複表單控件大小類。
不支持調整單個輸入組元素的大小。
複選框和收音機
將任何復選框或單選選項放在輸入組的插件中而不是文本中。
雖然<input>
視覺上支持多個 s,但驗證樣式僅適用於具有單個<input>
.
多個插件
支持多個附加組件,並且可以與復選框和單選輸入版本混合使用。
輸入組包括對自定義選擇和自定義文件輸入的支持。不支持這些的瀏覽器默認版本。
自定義選擇
可訪問性
確保所有表單控件都具有適當的可訪問名稱,以便可以將其目的傳達給輔助技術的用戶。實現這一點的最簡單方法是使用<label>
元素,或者在按鈕的情況下,將足夠描述性的文本作為<button>...</button>
內容的一部分。
對於無法包含可見<label>
或適當文本內容的情況,仍有其他方法可以提供可訪問的名稱,例如:
<label>
.visually-hidden
使用類隱藏的元素
- 指向可以用作標籤的現有元素
aria-labelledby
- 提供
title
屬性
- 使用顯式設置元素的可訪問名稱
aria-label
如果這些都不存在,輔助技術可能會求助於使用placeholder
屬性作為可訪問名稱<input>
和<textarea>
元素的後備。本節中的示例提供了一些建議的、特定於案例的方法。
雖然使用視覺隱藏的內容(.sr-only
、aria-label
,甚至placeholder
內容,一旦表單域有內容就會消失)將使輔助技術用戶受益,但對於某些用戶來說,缺少可見的標籤文本可能仍然是個問題。對於可訪問性和可用性而言,某種形式的可見標籤通常是最好的方法。