Skip to main content Skip to docs navigation
View on GitHub

Forms表单

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.用于创建各种表单的表单控件样式、布局选项和自定义组件的示例和使用指南。

On this page本页内容
Form control表单控件 Style textual inputs and textareas with support for multiple states.为文本输入和文本区域设置样式，支持多种状态。
Select Improve browser default select elements with a custom initial appearance.改进浏览器默认选择具有自定义初始外观的图元。
Checks & radios复选框和单选钮 Use our custom radio buttons and checkboxes in forms for selecting input options.在表单中使用自定义单选按钮和复选框来选择输入选项。
Range Replace browser default range inputs with our custom version.用我们的自定义版本替换浏览器默认范围输入。
Input group Attach labels and buttons to your inputs for increased semantic value.将标签和按钮附加到输入，以增加语义值。
Floating labels浮动标签 Create beautifully simple form labels that float over your input fields.创建漂亮简单的表单标签，这些标签漂浮在输入字段上。
Layout布局 Create inline, horizontal, or complex grid-based layouts with your forms.使用表单创建内嵌、水平或复杂的基于网格的布局。
Validation验证 Validate your forms with custom or native validation behaviors and styles.使用自定义或本机验证行为和样式验证表单。

Overview概述

Bootstrap’s form controls expand on our Rebooted form styles with classes. Bootstrap的表单控件通过类在重启动的表单样式上进行扩展。Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.使用这些类可以选择自定义显示，以便在浏览器和设备之间实现更一致的渲染。

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.确保在所有输入上使用适当的类型属性（例如，电子邮件地址email或数字信息number），以利用新的输入控件，如电子邮件验证、数字选择等。

Here’s a quick example to demonstrate Bootstrap’s form styles. 下面是一个演示Bootstrap的表单样式的快速示例。Keep reading for documentation on required classes, form layout, and more.继续阅读有关所需类、表单布局等的文档。

We'll never share your email with anyone else.
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 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>

Form text表单文本

Block-level or inline-level form text can be created using .form-text.块级或内联级表单文本可以使用.form-text创建。

Associating form text with form controls将表单文本与表单控件关联

Form text should be explicitly associated with the form control it relates to using the aria-describedby attribute. 表单文本应该使用aria-descripbedby属性显式地与表单控件关联。This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.这将确保当用户聚焦或进入控件时，屏幕阅读器等辅助技术将公布此表单文本。

Form text below inputs can be styled with .form-text. 输入下面的表单文本可以使用.form-text设置样式。If a block-level element will be used, a top margin is added for easy spacing from the inputs above.如果将使用块级元素，则会添加上边距，以便与上面的输入隔开。

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.密码长度必须为8-20个字符，包含字母和数字，并且不得包含空格、特殊字符或表情符号。 
<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

Inline text can use any typical inline HTML element (be it a <span>, <small>, or something else) with nothing more than the .form-text class.内联文本可以使用任何只使用.form-text类的典型的内联HTML元素（无论是<span>、<small>，或者其他）。

Must be 8-20 characters long. 
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6" class="col-form-label">Password</label>
</div>
<div class="col-auto">
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
</div>
<div class="col-auto">
<span id="passwordHelpInline" class="form-text">
Must be 8-20 characters long.
</span>
</div>
</div>

Disabled forms禁用表单

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.在输入控件上添加disabled的布尔属性，以防止用户交互并使其看起来更轻。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Add the disabled attribute to a <fieldset> to disable all the controls within. 将disabled的属性添加到<fieldset>以禁用其中的所有控件。Browsers treat all native form controls (<input>, <select>, and <button> elements) inside a <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them.浏览器将<fieldset disabled>内部的所有原生表单控件（<input>、<select>和<button>元素）视为禁用，阻止键盘和鼠标与它们交互。

However, if your form also includes custom button-like elements such as <a class="btn btn-*">...</a>, these will only be given a style of pointer-events: none, meaning they are still focusable and operable using the keyboard. 然而，如果你的表单还包含了自定义的模仿按钮，譬如<a class="btn btn-*">...</a>，它们只会给定pointer-events: none样式，意味着它们依然可获得焦点，并可以使用键盘来操作。In this case, you must manually modify these controls by adding tabindex="-1" to prevent them from receiving focus and aria-disabled="disabled" to signal their state to assistive technologies.在这种情况下，你必须手工修改这些控件，方法是添加tabindex="-1"，以阻止它们接受到焦点；添加aria-disabled="disabled"，以对辅助技术提示它们的状态。

Disabled fieldset example禁用字段集示例 
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledSelect" class="form-label">Disabled select menu</label>
<select id="disabledSelect" class="form-select">
<option>Disabled select</option>
</select>
</div>
<div class="mb-3">
<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>

Accessibility可访问性

Ensure that all form controls have an appropriate accessible name so that their purpose can be conveyed to users of assistive technologies. 确保所有表单控件都有适当的可访问名称，以便将其用途传达给辅助技术的用户。The simplest way to achieve this is to use a <label> element, or—in the case of buttons—to include sufficiently descriptive text as part of the <button>...</button> content.实现它的最简单的方法是使用<label>元素，或者——在有按钮的情况下——包含显著的说明性文本，作为<button>...</button>内容的一部分。

For situations where it’s not possible to include a visible <label> or appropriate text content, there are alternative ways of still providing an accessible name, such as:对于不可能包含可见<label>或适当的文本内容的情况，仍有其他方式提供可访问的名称，例如：

  • <label> elements hidden using the .visually-hidden class使用.visually-hidden类隐藏<label>元素。
  • Pointing to an existing element that can act as a label using aria-labelledby指向已有的可以用作标签的元素，方法是使用aria-labelledby
  • Providing a title attribute提供title属性
  • Explicitly setting the accessible name on an element using aria-label使用aria-label显式设置元素上的可访问名称

If none of these are present, assistive technologies may resort to using the placeholder attribute as a fallback for the accessible name on <input> and <textarea> elements. 如果这些都不存在，辅助技术可能会使用placeholder属性作为<input>元素及<textarea>元素上的访问名称的回退。The examples in this section provide a few suggested, case-specific approaches.本节中的示例提供了一些建议的、针对具体案例的方法。

While using visually hidden content (.visually-hidden, aria-label, and even placeholder content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. 虽然使用视觉隐藏内容（.visually-hidden、aria-label甚至placeholder内容，它会在表单字段有内容时消失）有利用辅助技术的用户，但是缺少视觉标签文本，对某些用户来说依然是有问题的。Some form of visible label is generally the best approach, both for accessibility and usability.对于可访问性和可用性而言，某种形式的可视标签通常是最好的方法。

Sass

Many form variables are set at a general level to be re-used and extended by individual form components. 许多表单变量在通用级别设置，以便由单个表单组件重用和扩展。You’ll see these most often as $btn-input-* and $input-* variables.您将经常看到这些$btn-input-*变量和$input-*变量。

Variables变量

$btn-input-* variables are shared global variables between our buttons and our form components. $btn-input-*变量是按钮和表单组件之间共享的全局变量。You’ll find these frequently reassigned as values to other component-specific variables.您会发现这些变量经常作为值重新分配给其他特定于组件的变量。

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;
$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;
$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;
$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;
$input-btn-border-width:      $border-width;