表单概览（Overview）

Bootstrap表单控件样式、布局选项和用于创建各种表单的自定义组件的示例和使用指南。

On this page

概述

Bootstrap的表单控件扩展了我们用类重置的表单样式。使用这些类可以选择自定义显示，以便在浏览器和设备之间实现更一致的呈现。

确保对所有输入使用适当的类型属性（例如，电子邮件地址或数字信息的号码），以利用新的输入控件，如电子邮件验证、号码选择等。

下面是一个演示Bootstrap表单样式的快速示例。继续阅读有关所需类、表单布局等的文档

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创建。

将窗体文本与窗体控件关联

表单文本应该使用 aria-describedby属性显式地与表单控件关联。这将确保辅助技术（如屏幕阅读器）在用户聚焦或进入控件时显示此表单文本。

下面的表单文本可以用.Form text设置样式。如果要使用块级元素，则会添加上边距，以便与上面的输入隔开。

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. 
<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类。

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>

禁用表单

在输入上添加禁用的布尔属性，以防止用户交互,并使其看起来更亮。 

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

将disabled属性添加到fieldset以禁用其中的所有控件。浏览器将 <fieldset disabled>中的所有本机窗体控件（<input>, <select> 和 <button>元素）视为已禁用，阻止它们上的键盘和鼠标交互。

但是，如果窗体还包含自定义按钮式元素，例如<a class="btn btn-*">...</a>，则这些元素将只被赋予指针事件的样式：pointer-events: none，这意味着它们仍然可以使用键盘进行聚焦和操作。在这种情况下，您必须手动修改这些控件，方法是添加 you must manually modify these controls by adding tabindex="-1" to prevent them from receiving focus 以防止它们接收焦点，并添加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>

辅助功能

确保所有窗体控件都有一个适当的可访问名称，以便可以将其目的传达给辅助技术的用户。实现这一点的最简单方法是使用<label>元素，或者对于按钮，使用足够的描述性文本作为<button>...</button>内容的一部分。

对于不可能包含可见的 <label>或适当的文本内容的情况，仍有其他方法提供可访问的名称，例如：

  • <label> 使用.visually-hidden类隐藏的元素。
  • 指向可以使用aria-labelledby作为标签的现有元素。
  • 提供标题属性 title 。
  • 使用aria-label标签显式设置元素的可访问名称。

如果这些都不存在，辅助技术可能会使用占位符属性 placeholder作为<input> 和 <textarea>元素上可访问名称的后备。本节中的示例提供了一些建议的、针对具体情况的方法。

虽然使用视觉隐藏的内容（code>.visually-hidden, aria-label, 甚至占位符内容placeholder，一旦表单字段有内容就会消失）将有利于辅助技术用户，但是缺少可见标签文本对于某些用户来说仍然是个问题。某种形式的可见标签通常是最好的方法，无论是对于可访问性还是可用性。

Sass

许多表单变量被设置在一个通用级别上，以便由单个表单组件重用和扩展。您经常会看到 $btn-input-* and $input-* 变量。

Variables

$btn-input-* 变量是按钮和表单组件之间的共享全局变量。您会发现这些值经常被重新分配给其他组件特定的变量。

$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;
返回顶部