Source形式
用于创建各种表单的表单控件样式、布局选项和自定义组件的示例和使用指南。
概述
Bootstrap 的表单控件使用类扩展了我们的 Rebooted 表单样式 。使用这些类来选择它们的自定义显示,以便在浏览器和设备之间实现更一致的呈现。
确保在所有输入(例如,电子邮件地址或数字信息)上使用适当的type
属性,以利用更新的输入控件,如电子邮件验证、号码选择等。email
number
这是一个演示 Bootstrap 表单样式的快速示例。继续阅读有关所需类、表单布局等的文档。
复制
<form>
<div class= "form-group" >
<label for= "exampleInputEmail1" > Email address</label>
<input type= "email" class= "form-control" id= "exampleInputEmail1" aria-describedby= "emailHelp" >
<small id= "emailHelp" class= "form-text text-muted" > We'll never share your email with anyone else.</small>
</div>
<div class= "form-group" >
<label for= "exampleInputPassword1" > Password</label>
<input type= "password" class= "form-control" id= "exampleInputPassword1" >
</div>
<div class= "form-group 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>
文本表单控件(如<input>
s、<select>
s 和<textarea>
s)使用类进行样式设置.form-control
。包括一般外观、焦点状态、大小等的样式。
请务必探索我们的自定义表单 以进一步设计风格<select>
。
复制
<form>
<div class= "form-group" >
<label for= "exampleFormControlInput1" > Email address</label>
<input type= "email" class= "form-control" id= "exampleFormControlInput1" placeholder= "[email protected] " >
</div>
<div class= "form-group" >
<label for= "exampleFormControlSelect1" > Example select</label>
<select class= "form-control" id= "exampleFormControlSelect1" >
<option> 1</option>
<option> 2</option>
<option> 3</option>
<option> 4</option>
<option> 5</option>
</select>
</div>
<div class= "form-group" >
<label for= "exampleFormControlSelect2" > Example multiple select</label>
<select multiple class= "form-control" id= "exampleFormControlSelect2" >
<option> 1</option>
<option> 2</option>
<option> 3</option>
<option> 4</option>
<option> 5</option>
</select>
</div>
<div class= "form-group" >
<label for= "exampleFormControlTextarea1" > Example textarea</label>
<textarea class= "form-control" id= "exampleFormControlTextarea1" rows= "3" ></textarea>
</div>
</form>
对于文件输入,交换.form-control
for .form-control-file
。
复制
<form>
<div class= "form-group" >
<label for= "exampleFormControlFile1" > Example file input</label>
<input type= "file" class= "form-control-file" id= "exampleFormControlFile1" >
</div>
</form>
浆纱
.form-control-lg
使用和之类的类设置高度.form-control-sm
。
复制
<input class= "form-control form-control-lg" type= "text" placeholder= ".form-control-lg" >
<input class= "form-control" type= "text" placeholder= "Default input" >
<input class= "form-control form-control-sm" type= "text" placeholder= ".form-control-sm" >
大选择
默认选择
小选择
复制
<select class= "form-control form-control-lg" >
<option> Large select</option>
</select>
<select class= "form-control" >
<option> Default select</option>
</select>
<select class= "form-control form-control-sm" >
<option> Small select</option>
</select>
只读
在输入上添加readonly
布尔属性以防止修改输入的值。只读输入看起来更轻(就像禁用输入一样),但保留标准光标。
复制
<input class= "form-control" type= "text" placeholder= "Readonly input here..." readonly >
只读纯文本
如果您想将<input readonly>
表单中的元素设置为纯文本样式,请使用.form-control-plaintext
该类删除默认表单字段样式并保留正确的边距和填充。
复制
<form>
<div class= "form-group row" >
<label for= "staticEmail" class= "col-sm-2 col-form-label" > Email</label>
<div class= "col-sm-10" >
<input type= "text" readonly class= "form-control-plaintext" id= "staticEmail" value= "[email protected] " >
</div>
</div>
<div class= "form-group row" >
<label for= "inputPassword" class= "col-sm-2 col-form-label" > Password</label>
<div class= "col-sm-10" >
<input type= "password" class= "form-control" id= "inputPassword" >
</div>
</div>
</form>
复制
<form class= "form-inline" >
<div class= "form-group mb-2" >
<label for= "staticEmail2" class= "sr-only" > Email</label>
<input type= "text" readonly class= "form-control-plaintext" id= "staticEmail2" value= "[email protected] " >
</div>
<div class= "form-group mx-sm-3 mb-2" >
<label for= "inputPassword2" class= "sr-only" > Password</label>
<input type= "password" class= "form-control" id= "inputPassword2" placeholder= "Password" >
</div>
<button type= "submit" class= "btn btn-primary mb-2" > Confirm identity</button>
</form>
使用 设置水平滚动范围输入.form-control-range
。
复制
<form>
<div class= "form-group" >
<label for= "formControlRange" > Example Range input</label>
<input type= "range" class= "form-control-range" id= "formControlRange" >
</div>
</form>
复选框和收音机
默认复选框和单选框在改进HTML 元素布局和行为的两种输入类型的单一类 .form-check
的帮助下得到改进。复选框用于在列表中选择一个或多个选项,而单选框用于从多个选项中选择一个。
支持禁用的复选框和无线电。该disabled
属性将应用较浅的颜色来帮助指示输入的状态。
复选框和单选按钮支持基于 HTML 的表单验证并提供简洁易懂的标签。因此,我们<input>
的 s 和<label>
s 是兄弟元素,而不是 a <input>
within a <label>
。这稍微有点冗长,因为您必须指定id
和for
属性来关联<input>
和<label>
。
默认(堆叠)
默认情况下,任何数量的直接同级复选框和单选都将垂直堆叠并以.form-check
.
复制
<div class= "form-check" >
<input class= "form-check-input" type= "checkbox" value= "" id= "defaultCheck1" >
<label class= "form-check-label" for= "defaultCheck1" >
Default checkbox
</label>
</div>
<div class= "form-check" >
<input class= "form-check-input" type= "checkbox" value= "" id= "defaultCheck2" disabled >
<label class= "form-check-label" for= "defaultCheck2" >
Disabled checkbox
</label>
</div>
复制
<div class= "form-check" >
<input class= "form-check-input" type= "radio" name= "exampleRadios" id= "exampleRadios1" value= "option1" checked >
<label class= "form-check-label" for= "exampleRadios1" >
Default radio
</label>
</div>
<div class= "form-check" >
<input class= "form-check-input" type= "radio" name= "exampleRadios" id= "exampleRadios2" value= "option2" >
<label class= "form-check-label" for= "exampleRadios2" >
Second default radio
</label>
</div>
<div class= "form-check" >
<input class= "form-check-input" type= "radio" name= "exampleRadios" id= "exampleRadios3" value= "option3" disabled >
<label class= "form-check-label" for= "exampleRadios3" >
Disabled radio
</label>
</div>
排队
通过添加.form-check-inline
任何.form-check
.
复制
<div class= "form-check form-check-inline" >
<input class= "form-check-input" type= "checkbox" id= "inlineCheckbox1" value= "option1" >
<label class= "form-check-label" for= "inlineCheckbox1" > 1</label>
</div>
<div class= "form-check form-check-inline" >
<input class= "form-check-input" type= "checkbox" id= "inlineCheckbox2" value= "option2" >
<label class= "form-check-label" for= "inlineCheckbox2" > 2</label>
</div>
<div class= "form-check form-check-inline" >
<input class= "form-check-input" type= "checkbox" id= "inlineCheckbox3" value= "option3" disabled >
<label class= "form-check-label" for= "inlineCheckbox3" > 3 (disabled)</label>
</div>
复制
<div class= "form-check form-check-inline" >
<input class= "form-check-input" type= "radio" name= "inlineRadioOptions" id= "inlineRadio1" value= "option1" >
<label class= "form-check-label" for= "inlineRadio1" > 1</label>
</div>
<div class= "form-check form-check-inline" >
<input class= "form-check-input" type= "radio" name= "inlineRadioOptions" id= "inlineRadio2" value= "option2" >
<label class= "form-check-label" for= "inlineRadio2" > 2</label>
</div>
<div class= "form-check form-check-inline" >
<input class= "form-check-input" type= "radio" name= "inlineRadioOptions" id= "inlineRadio3" value= "option3" disabled >
<label class= "form-check-label" for= "inlineRadio3" > 3 (disabled)</label>
</div>
无标签
添加.position-static
到.form-check
其中没有任何标签文本的输入。请记住仍然为辅助技术提供某种形式的标签(例如,使用aria-label
)。
复制
<div class= "form-check" >
<input class= "form-check-input position-static" type= "checkbox" id= "blankCheckbox" value= "option1" aria-label= "..." >
</div>
<div class= "form-check" >
<input class= "form-check-input position-static" type= "radio" name= "blankRadio" id= "blankRadio1" value= "option1" aria-label= "..." >
</div>
布局
由于 Bootstrap 适用于我们几乎所有的表单控件,因此默认情况下,表单将垂直堆叠display: block
。width: 100%
可以使用其他类来根据每个表单更改此布局。
.form-group
类是向表单添加一些结构的最简单方法。它提供了一个灵活的类,鼓励对标签、控件、可选帮助文本和表单验证消息进行适当的分组。默认情况下它只适用margin-bottom
,但它会.form-inline
根据需要选择其他样式。将它与<fieldset>
s、<div>
s 或几乎任何其他元素一起使用。
复制
<form>
<div class= "form-group" >
<label for= "formGroupExampleInput" > Example label</label>
<input type= "text" class= "form-control" id= "formGroupExampleInput" placeholder= "Example input placeholder" >
</div>
<div class= "form-group" >
<label for= "formGroupExampleInput2" > Another label</label>
<input type= "text" class= "form-control" id= "formGroupExampleInput2" placeholder= "Another input placeholder" >
</div>
</form>
使用我们的网格类可以构建更复杂的表单。将这些用于需要多列、不同宽度和其他对齐选项的表单布局。
复制
<form>
<div class= "row" >
<div class= "col" >
<input type= "text" class= "form-control" placeholder= "First name" >
</div>
<div class= "col" >
<input type= "text" class= "form-control" placeholder= "Last name" >
</div>
</div>
</form>
您也可以换成.row
标准.form-row
网格行的变体,它覆盖了默认的列间距,以获得更紧凑和更紧凑的布局。
复制
<form>
<div class= "form-row" >
<div class= "col" >
<input type= "text" class= "form-control" placeholder= "First name" >
</div>
<div class= "col" >
<input type= "text" class= "form-control" placeholder= "Last name" >
</div>
</div>
</form>
还可以使用网格系统创建更复杂的布局。
复制
<form>
<div class= "form-row" >
<div class= "form-group col-md-6" >
<label for= "inputEmail4" > Email</label>
<input type= "email" class= "form-control" id= "inputEmail4" >
</div>
<div class= "form-group col-md-6" >
<label for= "inputPassword4" > Password</label>
<input type= "password" class= "form-control" id= "inputPassword4" >
</div>
</div>
<div class= "form-group" >
<label for= "inputAddress" > Address</label>
<input type= "text" class= "form-control" id= "inputAddress" placeholder= "1234 Main St" >
</div>
<div class= "form-group" >
<label for= "inputAddress2" > Address 2</label>
<input type= "text" class= "form-control" id= "inputAddress2" placeholder= "Apartment, studio, or floor" >
</div>
<div class= "form-row" >
<div class= "form-group col-md-6" >
<label for= "inputCity" > City</label>
<input type= "text" class= "form-control" id= "inputCity" >
</div>
<div class= "form-group col-md-4" >
<label for= "inputState" > State</label>
<select id= "inputState" class= "form-control" >
<option selected > Choose...</option>
<option> ...</option>
</select>
</div>
<div class= "form-group col-md-2" >
<label for= "inputZip" > Zip</label>
<input type= "text" class= "form-control" id= "inputZip" >
</div>
</div>
<div class= "form-group" >
<div class= "form-check" >
<input class= "form-check-input" type= "checkbox" id= "gridCheck" >
<label class= "form-check-label" for= "gridCheck" >
Check me out
</label>
</div>
</div>
<button type= "submit" class= "btn btn-primary" > Sign in</button>
</form>
.row
通过将类添加到表单组并使用.col-*-*
类来指定标签和控件的宽度,使用网格创建水平表单。确保也添加.col-form-label
到您<label>
的 s 中,以便它们与其关联的表单控件垂直居中。
有时,您可能需要使用边距或填充实用程序来创建所需的完美对齐。例如,我们删除padding-top
了堆叠单选输入标签上的 ,以更好地对齐文本基线。
复制
<form>
<div class= "form-group row" >
<label for= "inputEmail3" class= "col-sm-2 col-form-label" > Email</label>
<div class= "col-sm-10" >
<input type= "email" class= "form-control" id= "inputEmail3" >
</div>
</div>
<div class= "form-group row" >
<label for= "inputPassword3" class= "col-sm-2 col-form-label" > Password</label>
<div class= "col-sm-10" >
<input type= "password" class= "form-control" id= "inputPassword3" >
</div>
</div>
<fieldset class= "form-group" >
<div class= "row" >
<legend class= "col-form-label col-sm-2 pt-0" > Radios</legend>
<div class= "col-sm-10" >
<div class= "form-check" >
<input class= "form-check-input" type= "radio" name= "gridRadios" id= "gridRadios1" value= "option1" checked >
<label class= "form-check-label" for= "gridRadios1" >
First radio
</label>
</div>
<div class= "form-check" >
<input class= "form-check-input" type= "radio" name= "gridRadios" id= "gridRadios2" value= "option2" >
<label class= "form-check-label" for= "gridRadios2" >
Second radio
</label>
</div>
<div class= "form-check disabled" >
<input class= "form-check-input" type= "radio" name= "gridRadios" id= "gridRadios3" value= "option3" disabled >
<label class= "form-check-label" for= "gridRadios3" >
Third disabled radio
</label>
</div>
</div>
</div>
</fieldset>
<div class= "form-group row" >
<div class= "col-sm-2" > Checkbox</div>
<div class= "col-sm-10" >
<div class= "form-check" >
<input class= "form-check-input" type= "checkbox" id= "gridCheck1" >
<label class= "form-check-label" for= "gridCheck1" >
Example checkbox
</label>
</div>
</div>
</div>
<div class= "form-group row" >
<div class= "col-sm-10" >
<button type= "submit" class= "btn btn-primary" > Sign in</button>
</div>
</div>
</form>
请务必使用.col-form-label-sm
or来正确遵循.col-form-label-lg
您<label>
的 s 或s的大小。<legend>
.form-control-lg
.form-control-sm
复制
<form>
<div class= "form-group row" >
<label for= "colFormLabelSm" class= "col-sm-2 col-form-label col-form-label-sm" > Email</label>
<div class= "col-sm-10" >
<input type= "email" class= "form-control form-control-sm" id= "colFormLabelSm" placeholder= "col-form-label-sm" >
</div>
</div>
<div class= "form-group row" >
<label for= "colFormLabel" class= "col-sm-2 col-form-label" > Email</label>
<div class= "col-sm-10" >
<input type= "email" class= "form-control" id= "colFormLabel" placeholder= "col-form-label" >
</div>
</div>
<div class= "form-group row" >
<label for= "colFormLabelLg" class= "col-sm-2 col-form-label col-form-label-lg" > Email</label>
<div class= "col-sm-10" >
<input type= "email" class= "form-control form-control-lg" id= "colFormLabelLg" placeholder= "col-form-label-lg" >
</div>
</div>
</form>
列大小
如前面的示例所示,我们的网格系统允许您在 a或中放置任意数量的.col
s 。他们将在它们之间平均分配可用宽度。您还可以选择列的一个子集来占用更多或更少的空间,而其余的 s 将其余部分平均分配,具有特定的列类,例如..row
.form-row
.col
.col-7
复制
<form>
<div class= "form-row" >
<div class= "col-7" >
<input type= "text" class= "form-control" placeholder= "City" >
</div>
<div class= "col" >
<input type= "text" class= "form-control" placeholder= "State" >
</div>
<div class= "col" >
<input type= "text" class= "form-control" placeholder= "Zip" >
</div>
</div>
</form>
自动调整大小
下面的示例使用 flexbox 实用程序将内容和更改垂直居中.col
,以便.col-auto
您的列只占用所需的空间。换句话说,列大小本身基于内容。
复制
<form>
<div class= "form-row align-items-center" >
<div class= "col-auto" >
<label class= "sr-only" for= "inlineFormInput" > Name</label>
<input type= "text" class= "form-control mb-2" id= "inlineFormInput" placeholder= "Jane Doe" >
</div>
<div class= "col-auto" >
<label class= "sr-only" for= "inlineFormInputGroup" > Username</label>
<div class= "input-group mb-2" >
<div class= "input-group-prepend" >
<div class= "input-group-text" > @</div>
</div>
<input type= "text" class= "form-control" id= "inlineFormInputGroup" placeholder= "Username" >
</div>
</div>
<div class= "col-auto" >
<div class= "form-check mb-2" >
<input class= "form-check-input" type= "checkbox" id= "autoSizingCheck" >
<label class= "form-check-label" for= "autoSizingCheck" >
Remember me
</label>
</div>
</div>
<div class= "col-auto" >
<button type= "submit" class= "btn btn-primary mb-2" > Submit</button>
</div>
</div>
</form>
然后,您可以再次将其与特定于大小的列类重新混合。
复制
<form>
<div class= "form-row align-items-center" >
<div class= "col-sm-3 my-1" >
<label class= "sr-only" for= "inlineFormInputName" > Name</label>
<input type= "text" class= "form-control" id= "inlineFormInputName" placeholder= "Jane Doe" >
</div>
<div class= "col-sm-3 my-1" >
<label class= "sr-only" for= "inlineFormInputGroupUsername" > Username</label>
<div class= "input-group" >
<div class= "input-group-prepend" >
<div class= "input-group-text" > @</div>
</div>
<input type= "text" class= "form-control" id= "inlineFormInputGroupUsername" placeholder= "Username" >
</div>
</div>
<div class= "col-auto my-1" >
<div class= "form-check" >
<input class= "form-check-input" type= "checkbox" id= "autoSizingCheck2" >
<label class= "form-check-label" for= "autoSizingCheck2" >
Remember me
</label>
</div>
</div>
<div class= "col-auto my-1" >
<button type= "submit" class= "btn btn-primary" > Submit</button>
</div>
</div>
</form>
当然也支持自定义表单控件 。
复制
<form>
<div class= "form-row align-items-center" >
<div class= "col-auto my-1" >
<label class= "mr-sm-2 sr-only" for= "inlineFormCustomSelect" > Preference</label>
<select class= "custom-select mr-sm-2" id= "inlineFormCustomSelect" >
<option selected > Choose...</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
</div>
<div class= "col-auto my-1" >
<div class= "custom-control custom-checkbox mr-sm-2" >
<input type= "checkbox" class= "custom-control-input" id= "customControlAutosizing" >
<label class= "custom-control-label" for= "customControlAutosizing" > Remember my preference</label>
</div>
</div>
<div class= "col-auto my-1" >
<button type= "submit" class= "btn btn-primary" > Submit</button>
</div>
</div>
</form>
使用.form-inline
该类在单个水平行上显示一系列标签、表单控件和按钮。内联表单中的表单控件与其默认状态略有不同。
控件是display: flex
,折叠任何 HTML 空白,并允许您使用间距 和flexbox 实用程序提供对齐控制。
控件和输入组接收width: auto
以覆盖 Bootstrap 默认值width: 100%
。
控件仅在至少 576 像素宽的视口中内嵌显示, 以解决移动设备上的窄视口。
您可能需要使用间距实用程序 手动解决单个表单控件的宽度和对齐问题(如下所示)。最后,确保始终<label>
在每个表单控件中包含一个,即使您需要使用.sr-only
.
复制
<form class= "form-inline" >
<label class= "sr-only" for= "inlineFormInputName2" > Name</label>
<input type= "text" class= "form-control mb-2 mr-sm-2" id= "inlineFormInputName2" placeholder= "Jane Doe" >
<label class= "sr-only" for= "inlineFormInputGroupUsername2" > Username</label>
<div class= "input-group mb-2 mr-sm-2" >
<div class= "input-group-prepend" >
<div class= "input-group-text" > @</div>
</div>
<input type= "text" class= "form-control" id= "inlineFormInputGroupUsername2" placeholder= "Username" >
</div>
<div class= "form-check mb-2 mr-sm-2" >
<input class= "form-check-input" type= "checkbox" id= "inlineFormCheck" >
<label class= "form-check-label" for= "inlineFormCheck" >
Remember me
</label>
</div>
<button type= "submit" class= "btn btn-primary mb-2" > Submit</button>
</form>
还支持自定义表单控件和选择。
复制
<form class= "form-inline" >
<label class= "my-1 mr-2" for= "inlineFormCustomSelectPref" > Preference</label>
<select class= "custom-select my-1 mr-sm-2" id= "inlineFormCustomSelectPref" >
<option selected > Choose...</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
<div class= "custom-control custom-checkbox my-1 mr-sm-2" >
<input type= "checkbox" class= "custom-control-input" id= "customControlInline" >
<label class= "custom-control-label" for= "customControlInline" > Remember my preference</label>
</div>
<button type= "submit" class= "btn btn-primary my-1" > Submit</button>
</form>
隐藏标签的替代品
如果您没有为每个输入添加标签,那么屏幕阅读器等辅助技术将无法处理您的表单。对于这些内联表单,您可以使用.sr-only
类隐藏标签。还有其他替代方法可以为辅助技术提供标签,例如aria-label
、aria-labelledby
或title
属性。如果这些都不存在,辅助技术可能会求助于使用该placeholder
属性(如果存在),但请注意,placeholder
不建议使用 of 作为其他标签方法的替代品。
帮助文本
.form-text
可以使用(以前称为.help-block
v3)创建表单中的块级帮助文本。内联帮助文本可以使用任何内联 HTML 元素和实用程序类(如.text-muted
.
将帮助文本与表单控件相关联
帮助文本应与使用该aria-describedby
属性相关的表单控件显式关联。这将确保辅助技术(例如屏幕阅读器)会在用户聚焦或进入控件时宣布此帮助文本。
输入下方的帮助文本可以使用.form-text
. 此类包括display: block
并添加了一些顶部边距,以便与上面的输入轻松间隔。
密码
您的密码长度必须为 8-20 个字符,包含字母和数字,并且不得包含空格、特殊字符或表情符号。
复制
<label for= "inputPassword5" > Password</label>
<input type= "password" id= "inputPassword5" class= "form-control" aria-describedby= "passwordHelpBlock" >
<small id= "passwordHelpBlock" class= "form-text text-muted" >
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
内联文本可以使用任何典型的内联 HTML 元素(可以是<small>
、<span>
或其他东西),只不过是一个实用程序类。
复制
<form class= "form-inline" >
<div class= "form-group" >
<label for= "inputPassword6" > Password</label>
<input type= "password" id= "inputPassword6" class= "form-control mx-sm-3" aria-describedby= "passwordHelpInline" >
<small id= "passwordHelpInline" class= "text-muted" >
Must be 8-20 characters long.
</small>
</div>
</form>
在输入上添加disabled
布尔属性以防止用户交互并使其看起来更轻。
复制
<input class= "form-control" id= "disabledInput" type= "text" placeholder= "Disabled input here..." disabled >
将disabled
属性添加到 a<fieldset>
以禁用其中的所有控件。
复制
<form>
<fieldset disabled >
<div class= "form-group" >
<label for= "disabledTextInput" > Disabled input</label>
<input type= "text" id= "disabledTextInput" class= "form-control" placeholder= "Disabled input" >
</div>
<div class= "form-group" >
<label for= "disabledSelect" > Disabled select menu</label>
<select id= "disabledSelect" class= "form-control" >
<option> Disabled select</option>
</select>
</div>
<div class= "form-group" >
<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>
锚点警告
默认情况下,浏览器会将 a 内的所有原生表单控件(<input>
和<select>
元素<button>
)<fieldset disabled>
视为禁用,从而阻止键盘和鼠标在它们上的交互。但是,如果您的表单还包含<a ... class="btn btn-*">
元素,则这些元素只会被赋予pointer-events: none
. 如关于按钮禁用状态 的部分(特别是锚元素的子部分)中所述,此 CSS 属性尚未标准化,在 Internet Explorer 10 中不完全支持,并且不会阻止键盘用户能够集中或激活这些链接。因此,为了安全起见,请使用自定义 JavaScript 禁用此类链接。
跨浏览器兼容性
disabled
虽然 Bootstrap将在所有浏览器中应用这些样式,但 Internet Explorer 11 及更低版本并不完全支持<fieldset>
. 使用自定义 JavaScript 禁用这些浏览器中的字段集。
验证
通过 HTML5 表单验证向您的用户提供有价值的、可操作的反馈 -在我们所有支持的浏览器中都可用 。从浏览器默认验证反馈中进行选择,或使用我们的内置类和启动器 JavaScript 实现自定义消息。
我们目前建议使用自定义验证样式,因为本机浏览器默认验证消息并非始终如一地暴露给所有浏览器中的辅助技术(最值得注意的是,桌面和移动设备上的 Chrome)。
这个怎么运作
下面是表单验证如何与 Bootstrap 一起工作:
HTML 表单验证通过 CSS 的两个伪类:invalid
和:valid
. 它适用于<input>
、<select>
和<textarea>
元素。
Bootstrap 将:invalid
和:valid
样式限定为父.was-validated
类,通常应用于<form>
. 否则,任何没有值的必填字段在页面加载时显示为无效。这样,您可以选择何时激活它们(通常在尝试提交表单之后)。
要重置表单的外观(例如,在使用 AJAX 进行动态表单提交的情况下),请在提交后再次删除.was-validated
该类。<form>
作为后备,可以使用类.is-invalid
而.is-valid
不是伪类来进行服务器端验证 。他们不需要.was-validated
父类。
由于 CSS 工作方式的限制,如果没有自定义 JavaScript 的帮助,我们(目前)无法将样式应用于<label>
DOM 中表单控件之前的样式。
所有现代浏览器都支持约束验证 API ,这是一系列用于验证表单控件的 JavaScript 方法。
反馈消息可以使用浏览器默认设置 (每个浏览器不同,并且无法通过 CSS 设置样式)或我们的自定义反馈样式以及额外的 HTML 和 CSS。
setCustomValidity
您可以在 JavaScript 中提供自定义有效性消息。
考虑到这一点,请考虑以下演示,了解我们的自定义表单验证样式、可选的服务器端类和浏览器默认设置。
自定义样式
对于自定义 Bootstrap 表单验证消息,您需要将novalidate
布尔属性添加到您的<form>
. 这将禁用浏览器默认反馈工具提示,但仍提供对 JavaScript 中表单验证 API 的访问。尝试提交以下表格;我们的 JavaScript 将拦截提交按钮并将反馈转发给您。尝试提交时,您会看到应用于表单控件的:invalid
和样式。:valid
自定义反馈样式应用自定义颜色、边框、焦点样式和背景图标以更好地传达反馈。s 的背景图标<select>
仅适用于.custom-select
,而不适用于.form-control
。
复制
<form class= "needs-validation" novalidate >
<div class= "form-row" >
<div class= "col-md-4 mb-3" >
<label for= "validationCustom01" > First name</label>
<input type= "text" class= "form-control" id= "validationCustom01" value= "Mark" required >
<div class= "valid-feedback" >
Looks good!
</div>
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationCustom02" > Last name</label>
<input type= "text" class= "form-control" id= "validationCustom02" value= "Otto" required >
<div class= "valid-feedback" >
Looks good!
</div>
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationCustomUsername" > Username</label>
<div class= "input-group" >
<div class= "input-group-prepend" >
<span class= "input-group-text" id= "inputGroupPrepend" > @</span>
</div>
<input type= "text" class= "form-control" id= "validationCustomUsername" aria-describedby= "inputGroupPrepend" required >
<div class= "invalid-feedback" >
Please choose a username.
</div>
</div>
</div>
</div>
<div class= "form-row" >
<div class= "col-md-6 mb-3" >
<label for= "validationCustom03" > City</label>
<input type= "text" class= "form-control" id= "validationCustom03" required >
<div class= "invalid-feedback" >
Please provide a valid city.
</div>
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationCustom04" > State</label>
<select class= "custom-select" id= "validationCustom04" required >
<option selected disabled value= "" > Choose...</option>
<option> ...</option>
</select>
<div class= "invalid-feedback" >
Please select a valid state.
</div>
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationCustom05" > Zip</label>
<input type= "text" class= "form-control" id= "validationCustom05" required >
<div class= "invalid-feedback" >
Please provide a valid zip.
</div>
</div>
</div>
<div class= "form-group" >
<div class= "form-check" >
<input class= "form-check-input" type= "checkbox" value= "" id= "invalidCheck" required >
<label class= "form-check-label" for= "invalidCheck" >
Agree to terms and conditions
</label>
<div class= "invalid-feedback" >
You must agree before submitting.
</div>
</div>
</div>
<button class= "btn btn-primary" type= "submit" > Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
( function () {
' use strict ' ;
window . addEventListener ( ' load ' , function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document . getElementsByClassName ( ' needs-validation ' );
// Loop over them and prevent submission
var validation = Array . prototype . filter . call ( forms , function ( form ) {
form . addEventListener ( ' submit ' , function ( event ) {
if ( form . checkValidity () === false ) {
event . preventDefault ();
event . stopPropagation ();
}
form . classList . add ( ' was-validated ' );
}, false );
});
}, false );
})();
</script>
浏览器默认值
对自定义验证反馈消息或编写 JavaScript 来更改表单行为不感兴趣?一切都好,您可以使用浏览器默认设置。尝试提交下面的表格。根据您的浏览器和操作系统,您会看到略有不同的反馈风格。
虽然这些反馈样式无法使用 CSS 设置样式,但您仍然可以通过 JavaScript 自定义反馈文本。
复制
<form>
<div class= "form-row" >
<div class= "col-md-4 mb-3" >
<label for= "validationDefault01" > First name</label>
<input type= "text" class= "form-control" id= "validationDefault01" value= "Mark" required >
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationDefault02" > Last name</label>
<input type= "text" class= "form-control" id= "validationDefault02" value= "Otto" required >
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationDefaultUsername" > Username</label>
<div class= "input-group" >
<div class= "input-group-prepend" >
<span class= "input-group-text" id= "inputGroupPrepend2" > @</span>
</div>
<input type= "text" class= "form-control" id= "validationDefaultUsername" aria-describedby= "inputGroupPrepend2" required >
</div>
</div>
</div>
<div class= "form-row" >
<div class= "col-md-6 mb-3" >
<label for= "validationDefault03" > City</label>
<input type= "text" class= "form-control" id= "validationDefault03" required >
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationDefault04" > State</label>
<select class= "custom-select" id= "validationDefault04" required >
<option selected disabled value= "" > Choose...</option>
<option> ...</option>
</select>
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationDefault05" > Zip</label>
<input type= "text" class= "form-control" id= "validationDefault05" required >
</div>
</div>
<div class= "form-group" >
<div class= "form-check" >
<input class= "form-check-input" type= "checkbox" value= "" id= "invalidCheck2" required >
<label class= "form-check-label" for= "invalidCheck2" >
Agree to terms and conditions
</label>
</div>
</div>
<button class= "btn btn-primary" type= "submit" > Submit form</button>
</form>
服务器端
我们建议使用客户端验证,但如果您需要服务器端验证,您可以使用.is-invalid
和指示无效和有效的表单字段.is-valid
。请注意,.invalid-feedback
这些类也支持。
复制
<form>
<div class= "form-row" >
<div class= "col-md-4 mb-3" >
<label for= "validationServer01" > First name</label>
<input type= "text" class= "form-control is-valid" id= "validationServer01" value= "Mark" required >
<div class= "valid-feedback" >
Looks good!
</div>
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationServer02" > Last name</label>
<input type= "text" class= "form-control is-valid" id= "validationServer02" value= "Otto" required >
<div class= "valid-feedback" >
Looks good!
</div>
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationServerUsername" > Username</label>
<div class= "input-group" >
<div class= "input-group-prepend" >
<span class= "input-group-text" id= "inputGroupPrepend3" > @</span>
</div>
<input type= "text" class= "form-control is-invalid" id= "validationServerUsername" aria-describedby= "inputGroupPrepend3" required >
<div class= "invalid-feedback" >
Please choose a username.
</div>
</div>
</div>
</div>
<div class= "form-row" >
<div class= "col-md-6 mb-3" >
<label for= "validationServer03" > City</label>
<input type= "text" class= "form-control is-invalid" id= "validationServer03" required >
<div class= "invalid-feedback" >
Please provide a valid city.
</div>
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationServer04" > State</label>
<select class= "custom-select is-invalid" id= "validationServer04" required >
<option selected disabled value= "" > Choose...</option>
<option> ...</option>
</select>
<div class= "invalid-feedback" >
Please select a valid state.
</div>
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationServer05" > Zip</label>
<input type= "text" class= "form-control is-invalid" id= "validationServer05" required >
<div class= "invalid-feedback" >
Please provide a valid zip.
</div>
</div>
</div>
<div class= "form-group" >
<div class= "form-check" >
<input class= "form-check-input is-invalid" type= "checkbox" value= "" id= "invalidCheck3" required >
<label class= "form-check-label" for= "invalidCheck3" >
Agree to terms and conditions
</label>
<div class= "invalid-feedback" >
You must agree before submitting.
</div>
</div>
</div>
<button class= "btn btn-primary" type= "submit" > Submit form</button>
</form>
支持的元素
验证样式可用于以下表单控件和组件:
<input>
s 和<textarea>
s with (包括输入组中.form-control
最多一个).form-control
<select>
s.form-control
或.custom-select
.form-check
s
.custom-checkbox
s 和.custom-radio
s
.custom-file
复制
<form class= "was-validated" >
<div class= "mb-3" >
<label for= "validationTextarea" > Textarea</label>
<textarea class= "form-control is-invalid" id= "validationTextarea" placeholder= "Required example textarea" required ></textarea>
<div class= "invalid-feedback" >
Please enter a message in the textarea.
</div>
</div>
<div class= "custom-control custom-checkbox mb-3" >
<input type= "checkbox" class= "custom-control-input" id= "customControlValidation1" required >
<label class= "custom-control-label" for= "customControlValidation1" > Check this custom checkbox</label>
<div class= "invalid-feedback" > Example invalid feedback text</div>
</div>
<div class= "custom-control custom-radio" >
<input type= "radio" class= "custom-control-input" id= "customControlValidation2" name= "radio-stacked" required >
<label class= "custom-control-label" for= "customControlValidation2" > Toggle this custom radio</label>
</div>
<div class= "custom-control custom-radio mb-3" >
<input type= "radio" class= "custom-control-input" id= "customControlValidation3" name= "radio-stacked" required >
<label class= "custom-control-label" for= "customControlValidation3" > Or toggle this other custom radio</label>
<div class= "invalid-feedback" > More example invalid feedback text</div>
</div>
<div class= "form-group" >
<select class= "custom-select" required >
<option value= "" > Open this select menu</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
<div class= "invalid-feedback" > Example invalid custom select feedback</div>
</div>
<div class= "custom-file" >
<input type= "file" class= "custom-file-input" id= "validatedCustomFile" required >
<label class= "custom-file-label" for= "validatedCustomFile" > Choose file...</label>
<div class= "invalid-feedback" > Example invalid custom file feedback</div>
</div>
</form>
如果您的表单布局允许,您可以将类交换.{valid|invalid}-feedback
为.{valid|invalid}-tooltip
类以在样式工具提示中显示验证反馈。确保有一个父position: relative
级用于工具提示定位。在下面的示例中,我们的列类已经具有此功能,但您的项目可能需要其他设置。
复制
<form class= "needs-validation" novalidate >
<div class= "form-row" >
<div class= "col-md-4 mb-3" >
<label for= "validationTooltip01" > First name</label>
<input type= "text" class= "form-control" id= "validationTooltip01" value= "Mark" required >
<div class= "valid-tooltip" >
Looks good!
</div>
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationTooltip02" > Last name</label>
<input type= "text" class= "form-control" id= "validationTooltip02" value= "Otto" required >
<div class= "valid-tooltip" >
Looks good!
</div>
</div>
<div class= "col-md-4 mb-3" >
<label for= "validationTooltipUsername" > Username</label>
<div class= "input-group" >
<div class= "input-group-prepend" >
<span class= "input-group-text" id= "validationTooltipUsernamePrepend" > @</span>
</div>
<input type= "text" class= "form-control" id= "validationTooltipUsername" aria-describedby= "validationTooltipUsernamePrepend" required >
<div class= "invalid-tooltip" >
Please choose a unique and valid username.
</div>
</div>
</div>
</div>
<div class= "form-row" >
<div class= "col-md-6 mb-3" >
<label for= "validationTooltip03" > City</label>
<input type= "text" class= "form-control" id= "validationTooltip03" required >
<div class= "invalid-tooltip" >
Please provide a valid city.
</div>
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationTooltip04" > State</label>
<select class= "custom-select" id= "validationTooltip04" required >
<option selected disabled value= "" > Choose...</option>
<option> ...</option>
</select>
<div class= "invalid-tooltip" >
Please select a valid state.
</div>
</div>
<div class= "col-md-3 mb-3" >
<label for= "validationTooltip05" > Zip</label>
<input type= "text" class= "form-control" id= "validationTooltip05" required >
<div class= "invalid-tooltip" >
Please provide a valid zip.
</div>
</div>
</div>
<button class= "btn btn-primary" type= "submit" > Submit form</button>
</form>
定制
验证状态可以通过 Sass 与$form-validation-states
地图进行自定义。位于我们的_variables.scss
文件中,这个 Sass 映射被循环生成默认valid
/invalid
验证状态。包括用于自定义每个州的颜色和图标的嵌套地图。虽然浏览器不支持其他状态,但使用自定义样式的用户可以轻松添加更复杂的表单反馈。
请注意,我们不建议在不修改form-validation-state
mixin 的情况下自定义这些值。
复制
// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states : map-merge (
(
"valid" : (
"color" : $form-feedback-valid-color ,
"icon" : $form-feedback-icon-valid
) ,
"invalid" : (
"color" : $form-feedback-invalid-color ,
"icon" : $form-feedback-icon-invalid
)
) ,
$form-validation-states
);
// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state , $data in $form-validation-states {
@include form-validation-state ( $state , map-get ( $data , color ) , map-get ( $data , icon ));
}
要获得更多自定义和跨浏览器一致性,请使用我们完全自定义的表单元素来替换浏览器默认值。它们建立在语义和可访问标记之上,因此它们是任何默认表单控件的可靠替代品。
复选框和收音机
每个复选框和单选框<input>
以及<label>
配对都包含在 a<div>
中以创建我们的自定义控件。从结构上讲,这与我们的默认方法相同.form-check
。
我们对所有状态使用同级选择器 ( ~
) 来正确设置自定义表单指示器的样式。当与类结合时,我们还可以根据的状态为每个项目设置文本样式。<input>
:checked
.custom-control-label
<input>
<input>
我们用和隐藏默认值opacity
并使用.custom-control-label
来构建一个新的自定义表单指示器。不幸的是,我们不能仅从 构建自定义元素,因为 CSS不适用于该元素。::before
::after
<input>
content
在选中状态下,我们使用来自Open Iconic的 base64 嵌入式 SVG 图标 。这为我们提供了跨浏览器和设备的样式和定位的最佳控制。
复选框
复制
<div class= "custom-control custom-checkbox" >
<input type= "checkbox" class= "custom-control-input" id= "customCheck1" >
<label class= "custom-control-label" for= "customCheck1" > Check this custom checkbox</label>
</div>
当通过 JavaScript 手动设置时,自定义复选框也可以使用:indeterminate
伪类(没有可用的 HTML 属性来指定它)。
如果您使用的是 jQuery,那么这样的内容就足够了:
复制
$ ( ' .your-checkbox ' ). prop ( ' indeterminate ' , true )
收音机
复制
<div class= "custom-control custom-radio" >
<input type= "radio" id= "customRadio1" name= "customRadio" class= "custom-control-input" >
<label class= "custom-control-label" for= "customRadio1" > Toggle this custom radio</label>
</div>
<div class= "custom-control custom-radio" >
<input type= "radio" id= "customRadio2" name= "customRadio" class= "custom-control-input" >
<label class= "custom-control-label" for= "customRadio2" > Or toggle this other custom radio</label>
</div>
排队
复制
<div class= "custom-control custom-radio custom-control-inline" >
<input type= "radio" id= "customRadioInline1" name= "customRadioInline1" class= "custom-control-input" >
<label class= "custom-control-label" for= "customRadioInline1" > Toggle this custom radio</label>
</div>
<div class= "custom-control custom-radio custom-control-inline" >
<input type= "radio" id= "customRadioInline2" name= "customRadioInline1" class= "custom-control-input" >
<label class= "custom-control-label" for= "customRadioInline2" > Or toggle this other custom radio</label>
</div>
已禁用
自定义复选框和收音机也可以禁用。将disabled
布尔属性添加到 中<input>
,自定义指标和标签描述将自动设置样式。
复制
<div class= "custom-control custom-checkbox" >
<input type= "checkbox" class= "custom-control-input" id= "customCheckDisabled1" disabled >
<label class= "custom-control-label" for= "customCheckDisabled1" > Check this custom checkbox</label>
</div>
<div class= "custom-control custom-radio" >
<input type= "radio" name= "radioDisabled" id= "customRadioDisabled2" class= "custom-control-input" disabled >
<label class= "custom-control-label" for= "customRadioDisabled2" > Toggle this custom radio</label>
</div>
开关
开关具有自定义复选框的标记,但使用.custom-switch
该类来呈现切换开关。开关也支持该disabled
属性。
复制
<div class= "custom-control custom-switch" >
<input type= "checkbox" class= "custom-control-input" id= "customSwitch1" >
<label class= "custom-control-label" for= "customSwitch1" > Toggle this switch element</label>
</div>
<div class= "custom-control custom-switch" >
<input type= "checkbox" class= "custom-control-input" disabled id= "customSwitch2" >
<label class= "custom-control-label" for= "customSwitch2" > Disabled switch element</label>
</div>
自定义<select>
菜单只需要一个自定义类,.custom-select
即可触发自定义样式。自定义样式仅限于s 的初始外观,并且由于浏览器限制<select>
无法修改s。<option>
打开此选择菜单 一 二 三
复制
<select class= "custom-select" >
<option selected > Open this select menu</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
您还可以从小型和大型自定义选择中进行选择,以匹配我们类似大小的文本输入。
打开此选择菜单 一 二 三
打开此选择菜单 一 二 三
复制
<select class= "custom-select custom-select-lg mb-3" >
<option selected > Open this select menu</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
<select class= "custom-select custom-select-sm" >
<option selected > Open this select menu</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
multiple
还支持该属性:
打开此选择菜单 一 二 三
复制
<select class= "custom-select" multiple >
<option selected > Open this select menu</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
作为size
属性:
打开此选择菜单 一 二 三
复制
<select class= "custom-select" size= "3" >
<option selected > Open this select menu</option>
<option value= "1" > One</option>
<option value= "2" > Two</option>
<option value= "3" > Three</option>
</select>
范围
使用. <input type="range">
_ .custom-range
轨道(背景)和拇指(值)的样式都在浏览器中显示相同。由于只有 IE 和 Firefox 支持从拇指的左侧或右侧“填充”其轨迹以直观地指示进度,因此我们目前不支持它。
示例范围
复制
<label for= "customRange1" > Example range</label>
<input type= "range" class= "custom-range" id= "customRange1" >
min
范围输入分别具有和max
—0
和的隐含值100
。min
您可以为使用和max
属性的那些指定新值。
示例范围
复制
<label for= "customRange2" > Example range</label>
<input type= "range" class= "custom-range" min= "0" max= "5" id= "customRange2" >
默认情况下,范围输入“捕捉”到整数值。要更改此设置,您可以指定一个step
值。在下面的示例中,我们使用step="0.5"
.
示例范围
复制
<label for= "customRange3" > Example range</label>
<input type= "range" class= "custom-range" min= "0" max= "5" step= "0.5" id= "customRange3" >
文件浏览器
文件输入是最复杂的,如果您想将它们与功能选择文件... 和选定的文件名文本挂钩,则需要额外的 JavaScript。
复制
<div class= "custom-file" >
<input type= "file" class= "custom-file-input" id= "customFile" >
<label class= "custom-file-label" for= "customFile" > Choose file</label>
</div>
<input>
我们通过隐藏默认文件opacity
,而是设置<label>
. 按钮生成并使用 定位::after
。最后,我们声明一个width
andheight
以<input>
保证周围内容的适当间距。
使用 SCSS 翻译或自定义字符串
:lang()
伪类 用于允许将“浏览”文本翻译成其他语言。$custom-file-text
使用相关的语言标签 和本地化字符串覆盖或添加条目到Sass 变量。英文字符串可以用同样的方式定制。例如,以下是添加西班牙语翻译的方法(西班牙语的语言代码是es
):
复制
$custom-file-text : (
en : "Browse" ,
es : "Elegir"
);
以下是lang(es)
针对西班牙语翻译的自定义文件输入的实际操作:
复制
<div class= "custom-file" >
<input type= "file" class= "custom-file-input" id= "customFileLang" lang= "es" >
<label class= "custom-file-label" for= "customFileLang" > Seleccionar Archivo</label>
</div>
您需要正确设置文档(或其子树)的语言才能显示正确的文本。这可以使用元素上的lang
属性或 HTTP 标头 以及其他方法来完成。<html>
Content-Language
使用 HTML 翻译或自定义字符串
Bootstrap 还提供了一种方法来翻译 HTML 中的“浏览”文本,该data-browse
属性可以添加到自定义输入标签中(例如荷兰语):
复制
<div class= "custom-file" >
<input type= "file" class= "custom-file-input" id= "customFileLangHTML" >
<label class= "custom-file-label" for= "customFileLangHTML" data-browse= "Bestand kiezen" > Voeg je document toe</label>
</div>