表单控件 · Bootstrap 6.0 中文文档

注意！ <select> 元素现在使用 .form-control 进行样式设置，以便使用。

大多数文本输入（包括日期和时间类型）、文本区域以及选择元素都提供表单控件样式。我们使用 .form-control 类统一对它们进行样式设置，并根据需要添加特定元素的修饰符。

电子邮件地址

HTML

<label for="exampleFormControlInput" class="form-label mb-2">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput" placeholder="name@example.com">

带表单字段

使用表单字段组件，将输入与标签、描述和验证反馈信息以垂直堆叠的方式布局和包裹。

电子邮件地址

我们绝不会将你的电子邮件与其他人分享。

HTML

<div class="form-field">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  <div class="form-text">
    We’ll never share your email with anyone else.
  </div>
</div>

文本区

文本区域使用与输入框相同的.form-control类。可以通过使用rows属性或自定义 CSS 来修改它们的高度。

示例文本区域

更高的文本区域

HTML

<div class="form-field">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1"></textarea>
</div>

<div class="form-field">
  <label for="exampleFormControlTextarea2" class="form-label">Taller textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea2" rows="4"></textarea>
</div>

选择

基本的 select 元素样式由 .form-control 类提供。样式受浏览器限制——选项和弹出框无法进行样式设置。

示例选择

HTML

<div class="form-field">
  <label for="exampleFormControlSelect2" class="form-label">Example select</label>
  <select class="form-control" id="exampleFormControlSelect2">
    <option>Choose one…</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

multiple 属性在 select 元素上受支持：

多重选择

HTML

<div>
  <label for="exampleFormControlSelect3" class="form-label">Multiple select</label>
  <select class="form-control" id="exampleFormControlSelect3" multiple aria-label="Multiple select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

正如 size 属性：

选择3号

HTML

<div>
  <label for="exampleFormControlSelect4" class="form-label">Size 3 select</label>
  <select class="form-control" id="exampleFormControlSelect4" size="3" aria-label="Size 3 select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

尺寸

使用类似 .form-control-lg 和 .form-control-sm 的类更改表单控件的大小。这会调整 height、padding、font-size、line-height 和 border-radius。

小输入

默认输入

大输入

HTML

<div>
  <label for="sizesInputSmall" class="form-label">Small input</label>
  <input class="form-control form-control-sm" type="text" id="sizesInputSmall" placeholder="Small input" aria-label="Small input example">
</div>
<div>
  <label for="sizesInputDefault" class="form-label">Default input</label>
  <input class="form-control" type="text" id="sizesInputDefault" placeholder="Default input" aria-label="Default input example">
</div>
<div>
  <label for="sizesInputLarge" class="form-label">Large input</label>
  <input class="form-control form-control-lg" type="text" id="sizesInputLarge" placeholder="Large input" aria-label="Large input example">
</div>

对于文本区域：

小文本框

默认文本框

大文本框

HTML

<div>
  <label for="sizesTextareaSmall" class="form-label">Small textarea</label>
  <textarea class="form-control form-control-sm" id="sizesTextareaSmall" placeholder="Small textarea" aria-label="Small textarea example"></textarea>
</div>
<div>
  <label for="sizesTextareaDefault" class="form-label">Default textarea</label>
  <textarea class="form-control" id="sizesTextareaDefault" placeholder="Default textarea" aria-label="Default textarea example"></textarea>
</div>
<div>
  <label for="sizesTextareaLarge" class="form-label">Large textarea</label>
  <textarea class="form-control form-control-lg" id="sizesTextareaLarge" placeholder="Large textarea" aria-label="Large textarea example"></textarea>
</div>

以及针对下拉选择：

小选择

默认选择

大选择

HTML

<div>
  <label for="sizesSelectSmall" class="form-label">Small select</label>
  <select class="form-control form-control-sm" id="sizesSelectSmall">
    <option>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
<div>
  <label for="sizesSelectDefault" class="form-label">Default select</label>
  <select class="form-control" id="sizesSelectDefault">
    <option>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
<div>
  <label for="sizesSelectLarge" class="form-label">Large select</label>
  <select class="form-control form-control-lg" id="sizesSelectLarge">
    <option>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

表单文本

块级或行内级表单文本可以使用 .form-text 创建。

表单文本应明确与其相关的表单控件关联，使用aria-describedby属性。这将确保辅助技术——如屏幕阅读器——在用户聚焦或输入控件时会发布此表单文本。

输入框下方的表单文本可以使用 .form-text 进行样式设置。如果将使用块级元素，会添加上边距，以便与上方的输入框轻松间隔。

密码

你的密码必须为8-20个字符长，包含字母和数字，且不得包含空格、特殊字符或表情符号。

HTML

<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>

内联文本可以使用任何典型的内联 HTML 元素（无论是 <span>、<small>，还是其他），只需添加 .form-text 类。

密码

必须为8-20个字符。

HTML

<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布尔属性，使其显示为灰色，移除指针事件，并防止聚焦。

HTML

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>
<select class="form-control" aria-label="Disabled select example" disabled>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<textarea class="form-control" rows="3" placeholder="Disabled textarea" aria-label="Disabled textarea example" disabled></textarea>

只读

在输入框上添加readonly布尔属性可以防止输入值被修改。readonly输入框仍然可以获取焦点并被选中，而disabled输入框则不能。

HTML

<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>

只读纯文本

如果你想在表单中将 <input readonly> 元素显示为纯文本，请将 .form-control 替换为 .form-control-plaintext 以移除默认的表单字段样式，并保留正确的 margin 和 padding。

电子邮件

密码

HTML

<div class="mb-3 row">
  <label for="staticEmail" class="sm:col-2 col-form-label">Email</label>
  <div class="sm:col-10">
    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
  </div>
</div>
<div class="mb-3 row">
  <label for="inputPassword" class="sm:col-2 col-form-label">Password</label>
  <div class="sm:col-10">
    <input type="password" class="form-control" id="inputPassword">
  </div>
</div>

HTML

<form class="row g-3">
  <div class="col-auto">
    <label for="staticEmail2" class="visually-hidden">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="col-auto">
    <label for="inputPassword2" class="visually-hidden">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn-solid theme-primary mb-3">Confirm identity</button>
  </div>
</form>

类型

几乎所有输入类型都受支持，但并非所有类型都在此处有文档说明。需要额外类或更改的输入类型如下所示。

日期与时间

日期和时间输入不需要额外的类。具体功能和外观取决于浏览器和操作系统。不过，你也可以使用我们的日期选择器组件，通过 JavaScript 在不同浏览器之间创建更一致的体验。

HTML

<input type="datetime-local" class="form-control" aria-label="Date and time picker" value="2026-02-24T13:00">
<input type="datetime-local" class="form-control" aria-label="Date and time picker with seconds" value="2026-02-24T13:00:30" step="1">
<input type="datetime-local" class="form-control" aria-label="Date and time picker with milliseconds" value="2026-02-24T13:00:30.500" step="0.001">
<input type="date" class="form-control" aria-label="Date picker" value="2026-02-24">
<input type="time" class="form-control" aria-label="Time picker" value="13:00">
<input type="month" class="form-control" aria-label="Month picker" value="2026-02">
<input type="week" class="form-control" aria-label="Week picker" value="2026-W09">

颜色

设置 type="color" 并添加 .form-control-color 到 <input> 沿着 .form-control. 我们使用修饰类来设置固定 height并覆盖浏览器之间的一些不一致性。

颜色选择器

HTML

<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#631aff" title="Choose your color">

尺寸也受支持：

大型颜色选择器

小型颜色选择器

HTML

<div>
  <label for="exampleColorInputLg" class="form-label">Large color picker</label>
  <input type="color" class="form-control form-control-lg form-control-color" id="exampleColorInputLg" value="#631aff" title="Choose your color">
</div>
<div>
  <label for="exampleColorInputSm" class="form-label">Small color picker</label>
  <input type="color" class="form-control form-control-sm form-control-color" id="exampleColorInputSm" value="#631aff" title="Choose your color">
</div>

数据列表

数据列表允许你创建一组 <option>可以从内部访问（并自动完成）的s <input>这些类似于 <select> 元素，但在菜单样式上有更多限制和差异。虽然大多数浏览器和操作系统都包含对…的一些支持 <datalist> 元素，它们的样式充其量也是不一致的。

了解更多关于datalist 元素支持情况的信息。

数据列表示例

HTML

<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>

你也可以与 .form-control-caret 类组合，为输入框添加插入符号，而无需使用选择元素。

带插入符的 Datalist 示例

HTML

<label for="exampleDataListCaret" class="form-label">Datalist example with caret</label>
<input class="form-control form-control-caret" list="datalistOptionsCaret" id="exampleDataListCaret" placeholder="Type to search...">
<datalist id="datalistOptionsCaret">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>

文件

input[type="file"] 元素使用 ::file-selector-button 伪元素进行样式设置，以向输入框添加一个按钮。你只需要添加 .form-control 类，以及你需要的任何尺寸修饰符。

默认文件输入示例

多个文件输入示例

禁用的文件输入示例

小文件输入示例

大文件输入示例

HTML

<div class="form-field">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile">
</div>
<div class="form-field">
  <label for="formFileMultiple" class="form-label">Multiple files input example</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="form-field">
  <label for="formFileDisabled" class="form-label">Disabled file input example</label>
  <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="form-field">
  <label for="formFileSm" class="form-label">Small file input example</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div class="form-field">
  <label for="formFileLg" class="form-label">Large file input example</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

鬼魂

幽灵输入是一种特殊类型的输入，不属于浏览器原生，当你的包装器处理间距、边框和聚焦样式时，会移除所有默认输入样式。这对于搜索栏和命令输入等自定义组合非常有用。将.form-control类替换为.form-ghost以移除默认样式。

.form-ghost 会移除输入框的聚焦轮廓，因此可以考虑在父元素上使用 :focus-within 来提供可见的聚焦指示器。

搜索

[!代码高亮]

HTML

<div class="form-field">
  <label for="exampleGhostInput" class="form-label">Search</label>
  <div class="d-flex align-items-center gap-3 p-3 border rounded-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" aria-hidden="true" viewBox="0 0 16 16">
      <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
    </svg>
    <input type="search" class="form-ghost" id="exampleGhostInput" placeholder="Search docs" aria-label="Search docs">
  </div>
</div>

你还可以使用 form-adorn 组件为你的幽灵输入提供预构建样式。

CSS

变量

表单控件在 .form-control 上使用本地 CSS 变量以实现实时自定义。CSS 变量的值由每个组件特有的 Sass map生成，并应用于前述类。

scss/表单/_表单控件.scss

// stylelint-disable custom-property-no-missing-var-function
// stylelint-disable-next-line scss/dollar-variable-default
$form-control-tokens: defaults(
  (
    --control-min-height: var(--btn-input-min-height),
    --control-padding-y: var(--btn-input-padding-y),
    --control-padding-x: var(--btn-input-padding-x),
    --control-font-size: var(--btn-input-font-size),
    --control-line-height: var(--btn-input-line-height),
    --control-fg: var(--btn-input-fg),
    --control-bg: var(--btn-input-bg),
    --control-border-width: var(--border-width),
    --control-border-color: var(--border-color),
    --control-border-radius: var(--radius-5),
    --control-box-shadow: var(--box-shadow-inset),
    --control-action-bg: var(--bg-1),
    --control-action-hover-bg: var(--bg-2),
    --control-transition-property: "border-color, box-shadow",
    --control-transition-duration: .15s,
    --control-transition-timing: ease-in-out,
    --control-placeholder-color: var(--fg-3),
    --control-disabled-color: var(--control-fg),
    --control-disabled-bg: var(--bg-2),
    --control-disabled-border-color: var(--control-border-color),
    --control-select-bg: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#00000080' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>"))},
    --control-select-bg-position: right .75rem center,
    --control-select-bg-size: 16px 12px,
    --control-select-bg-dark: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>"))},
  ),
  $form-control-tokens
);

对于.form-label：

scss/表单/_标签.scss

// stylelint-disable-next-line scss/dollar-variable-default
$form-label-tokens: defaults(
  (
    --label-margin-bottom: calc(var(--spacer) / 2),
    --label-font-size: null,
    --label-font-style: null,
    --label-font-weight: null,
    --label-color: null,
  ),
  $form-label-tokens
);

对于.form-text：

scss/表单/_表单文本.scss

// stylelint-disable-next-line scss/dollar-variable-default
$form-text-tokens: defaults(
  (
    --form-text-margin-top: .25rem,
    --form-text-font-size: var(--font-size-sm),
    --form-text-font-style: null,
    --form-text-font-weight: null,
    --form-text-color: var(--fg-2),
  ),
  $form-text-tokens
);

根变量

一些输入框和按钮共享一些根变量，以确保所有表单元素的一致性，主要是为了尺寸统一。

scss/_root.scss

--control-checked-bg: var(--primary-base),
--control-checked-border-color: var(--control-checked-bg),
--control-active-bg: var(--primary-base),
--control-active-border-color: var(--control-active-bg),
--control-disabled-bg: var(--bg-3),
--control-disabled-opacity: .65,
// Shared motion for checkbox/radio marks; slight overshoot so the mark pops in
--control-transition-duration: .15s,
--control-transition-timing: cubic-bezier(.34, 1.56, .64, 1),

--btn-input-fg: var(--fg-body),
--btn-input-bg: var(--bg-body),

--btn-input-gap: .375rem,
--btn-input-min-height: 2.375rem,
--btn-input-padding-y: .375rem,
--btn-input-padding-x: .75rem,
--btn-input-font-size: var(--body-font-size),
--btn-input-font-weight: var(--font-weight-normal),
--btn-input-line-height: var(--body-line-height),
--btn-input-border-radius: var(--radius-5),

--btn-input-xs-gap: var(--spacer-1),
--btn-input-xs-min-height: 1.5rem,
--btn-input-xs-padding-y: .125rem,
--btn-input-xs-padding-x: .5rem,
--btn-input-xs-font-size: var(--font-size-xs),
--btn-input-xs-line-height: 1.125,
--btn-input-xs-border-radius: var(--radius-5),

--btn-input-sm-gap: .375rem,
--btn-input-sm-min-height: 2rem,
--btn-input-sm-padding-y: .25rem,
--btn-input-sm-padding-x: .625rem,
--btn-input-sm-font-size: var(--font-size-sm),
--btn-input-sm-line-height: var(--line-height-sm),
--btn-input-sm-border-radius: var(--radius-5),

--btn-input-lg-gap: .375rem,
--btn-input-lg-min-height: 2.75rem,
--btn-input-lg-padding-y: .5rem,
--btn-input-lg-padding-x: 1rem,
--btn-input-lg-font-size: var(--font-size-md),
--btn-input-lg-line-height: var(--line-height-md),
--btn-input-lg-border-radius: var(--radius-7),

Sass map

我们使用 Sass map来定义表单控件的大小，这样你可以轻松添加或修改大小。

scss/forms/_form-control.scss

$form-control-sizes: ();
// stylelint-disable-next-line scss/dollar-variable-default
$form-control-sizes: defaults(
  ("sm", "lg"),
  $form-control-sizes
);