表单装饰 · Bootstrap 6.0 中文文档

它是如何工作的

将.form-control和.form-adorn应用到一个包装元素。.form-control提供边框、背景、内边距和焦点状态；.form-adorn使用 flexbox 来将装饰项与“幽灵输入”并排放置，幽灵输入是一种几乎没有视觉样式的表单控件。内部的.form-ghost输入是透明的，并继承包装元素的样式。

使用<label>作为包装器。包装器看起来像一个输入框，所以人们会点击图标、文本或周围的填充区域，并期望字段获得焦点。使用<label>可以让你免费实现这一点，因为点击标签会将焦点放到它所标注的控件上。无需使用 JavaScript。

用 aria-hidden="true" 标记装饰物。一个包裹的 <label> 标签输入，因此没有它时，像 $ 这样的装饰物会加入可访问名称，屏幕阅读器会朗读“Amount $”而不是“Amount”。装饰物是装饰性的，因此应将其排除在可访问性树之外，并将任何有意义的内容放在可见标签中或放在 .form-text 描述中。

一个元素可以有多个标签，因此包裹的 <label> 和单独的 <label for="…"> 可以一起工作。不要在包装器内放置按钮或其他交互式控件 —— <label> 不能包含交互式内容。

看见这个表单控件有关...的更多信息的文档 .form-control 和 .form-ghost 课程。

示例

包裹一个图标和一个 .form-ghost 输入在里面 <label> 与 .form-control 和 .form-adorn在 DOM 中将装饰放置在输入前，以用于起始位置（从左到右时在左侧）。

HTML

<label class="form-control form-adorn">
  <div class="form-adorn-icon" aria-hidden="true">
    <svg class="bi" width="16" height="16"><use href="#search" /></svg>
  </div>
  <input type="search" class="form-ghost" placeholder="Search...">
</label>

使用 .form-adorn-end 将装饰定位在尾侧（保持 DOM 顺序，使用 CSS 视觉翻转）：

HTML

<label class="form-control form-adorn form-adorn-end">
  <div class="form-adorn-icon" aria-hidden="true">
    <svg class="bi" width="16" height="16"><use href="#envelope" /></svg>
  </div>
  <input type="email" class="form-ghost" placeholder="you@example.com">
</label>

带标签

在.form-adorn包裹外添加第二个标签来命名字段。用for指向输入，这样即使更改包裹，输入也会保留其名称：

搜索

电子邮件地址

HTML

<div>
  <label for="searchInput" class="form-label">Search</label>
  <label class="form-control form-adorn">
    <div class="form-adorn-icon" aria-hidden="true">
      <svg class="bi" width="16" height="16"><use href="#search" /></svg>
    </div>
    <input type="search" class="form-ghost" id="searchInput" placeholder="Search...">
  </label>
</div>
<div>
  <label for="emailInput" class="form-label">Email address</label>
  <label class="form-control form-adorn form-adorn-end">
    <div class="form-adorn-icon" aria-hidden="true">
      <svg class="bi" width="16" height="16"><use href="#envelope" /></svg>
    </div>
    <input type="email" class="form-ghost" id="emailInput" placeholder="you@example.com">
  </label>
</div>

带表单字段

将 .form-adorn 包装在 .form-field 中，以将其与标签和描述文本配对。

搜索在所有页面和帖子中搜索。

HTML

<div class="form-field">
  <label for="adornField" class="form-label">Search</label>
  <label class="form-control form-adorn">
    <div class="form-adorn-icon" aria-hidden="true">
      <svg class="bi" width="16" height="16"><use href="#search" /></svg>
    </div>
    <input type="search" class="form-ghost" id="adornField" placeholder="Search...">
  </label>
  <small class="form-text">Search across all pages and posts.</small>
</div>

文本装饰

对于货币符号、单位、域名后缀和其他基于文本的装饰，请使用 .form-adorn-text。文本装饰会根据其内容自动调整大小。

HTML

<label class="form-control form-adorn">
  <span class="form-adorn-text" aria-hidden="true">$</span>
  <input type="text" class="form-ghost" placeholder="0.00">
</label>
<label class="form-control form-adorn form-adorn-end">
  <span class="form-adorn-text" aria-hidden="true">USD</span>
  <input type="text" class="form-ghost" placeholder="Amount">
</label>
<label class="form-control form-adorn">
  <span class="form-adorn-text" aria-hidden="true">https://</span>
  <input type="text" class="form-ghost" placeholder="example.com">
</label>
<label class="form-control form-adorn form-adorn-end">
  <span class="form-adorn-text" aria-hidden="true">@example.com</span>
  <input type="text" class="form-ghost" placeholder="username">
</label>

尺寸

在包装上使用.form-adorn-sm或.form-adorn-lg来调整尺寸。

HTML

<label class="form-control form-control-sm form-adorn">
  <div class="form-adorn-icon" aria-hidden="true">
    <svg class="bi" width="16" height="16"><use href="#search" /></svg>
  </div>
  <input type="text" class="form-ghost" placeholder="Small input">
</label>
<label class="form-control form-adorn">
  <div class="form-adorn-icon" aria-hidden="true">
    <svg class="bi" width="16" height="16"><use href="#search" /></svg>
  </div>
  <input type="text" class="form-ghost" placeholder="Default input">
</label>
<label class="form-control form-control-lg form-adorn">
  <div class="form-adorn-icon" aria-hidden="true">
    <svg class="bi" width="16" height="16"><use href="#search" /></svg>
  </div>
  <input type="text" class="form-ghost" placeholder="Large input">
</label>

CSS

变量

scss/forms/_form-adorn.scss

// stylelint-disable-next-line scss/dollar-variable-default
$form-adorn-tokens: defaults(
  (
    --form-adorn-gap: .375rem,
    --form-adorn-icon-size: 1rem,
    --form-adorn-icon-color: var(--fg-2),
  ),
  $form-adorn-tokens
);