Source輸入組
通過在文本輸入、自定義選擇和自定義文件輸入的任一側添加文本、按鈕或按鈕組來輕鬆擴展表單控件。
在輸入的任一側放置一個附加組件或按鈕。您也可以在輸入的兩側放置一個。請記住將<label>
s 放在輸入組之外。
將相對的表單大小類添加到.input-group
自身,其中的內容將自動調整大小 - 無需在每個元素上重複表單控件大小類。
不支持調整單個輸入組元素的大小。
將任何復選框或單選選項放在輸入組的插件中而不是文本中。
雖然<input>
視覺上支持多個 s,但驗證樣式僅適用於具有單個<input>
.
支持多個附加組件,並且可以與復選框和單選輸入版本混合使用。
輸入組包括對自定義選擇和自定義文件輸入的支持。不支持這些的瀏覽器默認版本。
如果您沒有為每個輸入添加標籤,屏幕閱讀器將無法處理您的表單。對於這些輸入組,請確保將任何附加標籤或功能傳達給輔助技術。
要使用的確切技術(<label>
使用類隱藏的元素.sr-only
,或使用aria-label
andaria-labelledby
屬性,可能與 結合使用aria-describedby
)以及需要傳達的其他信息將根據您正在實現的界面小部件的確切類型而有所不同。本節中的示例提供了一些建議的、特定於案例的方法。