通过在文本输入、自定义选择和自定义文件输入的任一侧添加文本、按钮或按钮组来轻松扩展表单控件。
基本示例
在输入的任一侧放置一个附加组件或按钮。您也可以在输入的两侧放置一个。请记住将<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
内容,一旦表单字段有内容就会消失)将使辅助技术用户受益,但对于某些用户来说,缺少可见的标签文本可能仍然是个问题。对于可访问性和可用性而言,某种形式的可见标签通常是最好的方法。