在 GitHub 上查看
表单
有关表单控件样式、布局选项和自定义组件的示例和使用指南，用于创建各种表单。
概述
Bootstrap 的表单控件使用类扩展了我们的重新启动表单样式。使用这些类选择其自定义显示，以在浏览器和设备之间实现更一致的呈现。
务必在所有输入上使用适当的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>、<select>和<textarea>）使用.form-control类设置样式。其中包括一般外观、焦点状态、大小等样式。
务必浏览我们的自定义表单以进一步设置<select>样式。
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</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换成.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@example.com">
</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@example.com">
</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>复选框和单选按钮
默认复选框和单选按钮在 .form-check 的帮助下得到改进，一个用于两种输入类型的单一类，可改进其 HTML 元素的布局和行为。复选框用于在列表中选择一个或多个选项，而单选按钮用于从多个选项中选择一个选项。
支持禁用的复选框和单选按钮。disabled 属性将应用较浅的颜色以帮助指示输入状态。
复选框和单选按钮支持基于 HTML 的表单验证，并提供简洁、可访问的标签。因此，我们的 <input> 和 <label> 是兄弟元素，而不是 <label> 中的 <input>。这稍微冗长一些，因为您必须指定 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>、<div> 或几乎任何其他元素一起使用。
<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-*-* 类指定标签和控件的宽度，使用网格创建水平表单。务必向 <label> 添加 .col-form-label，以便它们与其关联的表单控件垂直居中。
有时，您可能需要使用边距或填充实用程序来创建您需要的完美对齐。例如，我们删除了堆叠单选输入标签上的 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 row">
<legend class="col-form-label col-sm-2 float-sm-left 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>
</fieldset>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<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>水平表单标签大小
务必向 <label> 或 <legend> 使用 .col-form-label-sm 或 .col-form-label-lg，以正确遵循 .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>列大小
如前例所示，我们的网格系统允许您在 .row 或 .form-row 中放置任意数量的 .col。它们将在它们之间平均分配可用宽度。您还可以选择一部分列来占用更多或更少的空间，而剩余的 .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%。 - 控件仅在视口宽度至少为 576px 时内联显示，以适应移动设备上的窄视口。
您可能需要使用间距实用工具（如下所示）手动解决各个表单控件的宽度和对齐问题。最后，请务必始终为每个表单控件包含一个 <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 用作其他标签方法的替代品。
帮助文本
可以使用 .form-text（以前在 v3 中称为 .help-block）创建表单中的块级帮助文本。可以使用任何内联 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>
向 <fieldset> 添加 disabled 属性以禁用其中的所有控件。
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<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>锚点的注意事项
浏览器将 <fieldset disabled> 内部的所有本机表单控件（<input>、<select> 和 <button> 元素）视为已禁用，从而阻止键盘和鼠标与它们进行交互。
但是，如果您的表单还包括自定义按钮状元素，如 <a ... class="btn btn-*">，则这些元素只会获得 pointer-events: none 样式。如按钮的 禁用状态 部分（特别是在锚元素的子部分）中所述，此 CSS 属性尚未标准化，且在 Internet Explorer 10 中不受完全支持。基于锚点的控件仍可以使用键盘聚焦和操作。您必须通过添加 tabindex="-1" 来手动修改这些控件，以防止它们接收焦点，并添加 aria-disabled="disabled" 来向辅助技术发出它们的信号。
跨浏览器兼容性
虽然 Bootstrap 会在所有浏览器中应用这些样式，但 Internet Explorer 11 及更低版本不支持 <fieldset> 上的 disabled 属性。在这些浏览器中，请使用自定义 JavaScript 禁用 fieldset。
验证
使用 HTML5 表单验证为用户提供有价值的可操作反馈——可在我们支持的所有浏览器中使用。从浏览器默认验证反馈中选择，或使用我们的内置类和入门 JavaScript 实现自定义消息。
我们知道，目前客户端自定义验证样式和工具提示不可访问，因为它们未向辅助技术公开。在我们致力于寻找解决方案时，我们建议使用服务器端选项或默认浏览器验证方法。
工作原理
以下是 Bootstrap 中表单验证的工作原理
- HTML 表单验证通过 CSS 的两个伪类
:invalid和:valid应用。它适用于<input>、<select>和<textarea>元素。 - Bootstrap 将
:invalid和:valid样式作用域限定到父.was-validated类，通常应用于<form>。否则，任何没有值的必填字段在页面加载时都会显示为无效。这样，你可以选择何时激活它们（通常在尝试提交表单后）。 - 要重置表单的外观（例如，在使用 AJAX 进行动态表单提交的情况下），请在提交后再次从
<form>中移除.was-validated类。 - 作为后备，
.is-invalid和.is-valid类可用于代替伪类，用于服务器端验证。它们不需要.was-validated父类。 - 由于 CSS 工作方式的限制，我们（目前）无法在没有自定义 JavaScript 帮助的情况下，对 DOM 中表单控件之前的
<label>应用样式。 - 所有现代浏览器都支持约束验证 API，这是一系列用于验证表单控件的 JavaScript 方法。
- 反馈消息可以使用浏览器默认值（每个浏览器不同，且无法通过 CSS 设置样式）或我们的自定义反馈样式，以及额外的 HTML 和 CSS。
- 你可以在 JavaScript 中使用
setCustomValidity提供自定义有效性消息。
考虑到这一点，请考虑以下演示，了解我们的自定义表单验证样式、可选的服务器端类和浏览器默认值。
自定义样式
对于自定义 Bootstrap 表单验证消息，你需要向 <form> 添加 novalidate 布尔属性。这会禁用浏览器默认反馈工具提示，但仍可通过 JavaScript 访问表单验证 API。尝试提交下面的表单；我们的 JavaScript 将拦截提交按钮并向你中继反馈。在尝试提交时，你将看到 :invalid 和 :valid 样式应用于你的表单控件。
自定义反馈样式应用自定义颜色、边框、焦点样式和背景图标，以便更好地传达反馈。<select> 的背景图标仅可用于 .custom-select，而不能用于 .form-control。
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 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-6 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>
<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-6 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-6 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</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 也受这些类支持。
对于无效字段，请确保无效反馈/错误消息使用 aria-describedby 与相关的表单字段关联。如果该字段已指向其他表单文本，则允许引用多个 id。
<form>
<div class="form-row">
<div class="col-md-6 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-6 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>
<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" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" 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" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" 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" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" 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" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div id="invalidCheck3Feedback" class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>支持的元素
验证样式适用于以下表单控件和组件
- 带有
.form-control的<input>和<textarea> - 带有
.form-control或.custom-select的<select> .form-check.custom-checkbox和.custom-radio.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="mb-3">
<select class="custom-select" required>
<option value="">Choose...</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 mb-3">
<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>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<span class="input-group-text" id="validatedInputGroupPrepend">@</span>
</div>
<input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<label class="input-group-text" for="validatedInputGroupSelect">Options</label>
</div>
<select class="custom-select" id="validatedInputGroupSelect" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="input-group is-invalid">
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
<label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</form>工具提示
如果表单布局允许，你可以将 .{valid|invalid}-feedback 类换成 .{valid|invalid}-tooltip 类，以在样式化工具提示中显示验证反馈。请确保在工具提示定位的父级上设置 position: relative。在下面的示例中，我们的列类已经设置了此属性，但你的项目可能需要其他设置。
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 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-6 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>
<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 映射进行自定义。此 Sass 映射位于我们的 _variables.scss 文件中，循环生成默认的 valid/invalid 验证状态。其中包含一个嵌套映射，用于自定义每个状态的颜色和图标。虽然浏览器不支持任何其他状态，但使用自定义样式的用户可以轻松添加更复杂的表单反馈。
请注意，我们不建议在不修改 form-validation-state 混合的情况下自定义这些值。
// 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));
}
输入组验证
要检测具有验证功能的输入组中哪些元素需要圆角，输入组需要一个额外的 .has-validation 类。
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
@
请选择用户名。
自定义表单
为了获得更多自定义和跨浏览器一致性，请使用我们完全自定义的表单元素来替换浏览器默认值。它们建立在语义和可访问的标记之上，因此它们是任何默认表单控件的可靠替代品。
复选框和单选按钮
每个复选框和单选按钮 <input> 和 <label> 配对都包装在一个 <div> 中，以创建我们的自定义控件。从结构上来说，这与我们的默认 .form-check 相同。
我们对所有 <input> 状态（如 :checked）使用同级选择器 (~)，以正确设置我们自定义表单指示器的样式。当与 .custom-control-label 类结合使用时，我们还可以根据 <input> 的状态设置每个项目的文本样式。
我们使用 opacity 隐藏默认的 <input>，并使用 .custom-control-label 在其位置使用 ::before 和 ::after 构建一个新的自定义表单指示器。遗憾的是，我们无法仅使用 <input> 构建一个自定义指示器，因为 CSS 的 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="customRadioInline" 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="customRadioInline" 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 即可触发自定义样式。自定义样式仅限于 <select> 的初始外观，并且由于浏览器限制，无法修改 <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>范围
使用 .custom-range 创建自定义 <input type="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">文件浏览器
推荐用于为自定义文件输入添加动画的插件：bs-custom-file-input，这是我们目前在文档中使用的方法。
文件输入是其中最复杂的，如果您希望将其与功能性选择文件...和选定文件名文本关联起来，则需要额外的 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>我们通过 opacity 隐藏默认文件 <input>，并改用 <label> 样式。使用 ::after 生成并定位按钮。最后，我们在 <input> 上声明 width 和 height，以便为周围内容提供适当的间距。
使用 SCSS 翻译或自定义字符串
:lang() 伪类 用于允许将“浏览”文本翻译成其他语言。使用相关的 语言标记 和本地化字符串覆盖或向 Sass 变量 $custom-file-text 中添加条目。可以采用相同的方式自定义英文字符串。例如，以下是如何添加西班牙语翻译（西班牙语的语言代码为 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 属性（在 <html> 元素上）或 Content-Language HTTP 标头（除其他方法外）来完成此操作。
使用 HTML 翻译或自定义字符串
Bootstrap 还提供了一种方法，可以使用 data-browse 属性翻译 HTML 中的“浏览”文本，该属性可以添加到自定义输入标签（荷兰语示例）
<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>