Bootstrap 输入框

现代 Bootstrap 表单输入框

本教程介绍如何在 Bootstrap 5 中使用各种[表单输入控件]（Form Input Controls），重点关注当前的最佳实践和[响应式设计]（Responsive Design）。

支持的表单控件

Bootstrap 5 增强了各种标准 HTML5 表单控件的样式。主要支持的控件包括：

input（所有 HTML5 类型：text, password, email, number, date, file 等）
textarea
checkbox（复选框）
radio（单选按钮）
select（选择列表）
range（范围输入）
[浮动标签]（Floating Labels）（Bootstrap 5 的新特性）

在 input 上正确声明 type [属性]（Attribute）（例如，type="email"）至关重要，这不仅影响 Bootstrap 的样式，也影响浏览器原生的[验证]（Validation）和用户体验（例如，在移动设备上显示相应的键盘）。

Bootstrap 输入框

Bootstrap 支持所有 HTML5 输入类型，例如：text, password, datetime-local, date, month, time, week, number, email, url, search, tel, 和 color。使用 .form-control [类]（Class）获取基础样式。

注意：为了让输入框获得完整的样式和响应式特性，请确保它们拥有 .form-control 类，并且通常包裹在带有边距[工具类]（Utilities）如 mb-3 的 <div> 中（这取代了旧版的 .form-group）。

姓名:

密码:

以下示例演示了两个常见的输入框：一个用于文本，一个用于密码，它们按照 Bootstrap 5 的规范正确构建：

<form>
  <div class="mb-3">
    <label for="usrName" class="form-label">Name:</label>
    <input type="text" class="form-control" id="usrName" placeholder="Enter your name">
  </div>
  <div class="mb-3">
    <label for="usrPwd" class="form-label">Password:</label>
    <input type="password" class="form-control" id="usrPwd" placeholder="Enter your password">
  </div>
</form>

<!-- 常见错误：忘记在 label 上添加 for 属性，或者其值与 input 的 id 不匹配，这会影响[可访问性]（Accessibility）和功能。务必确保它们匹配。了解更多关于可访问表单的信息，请访问：https://getbootstrap.com/docs/5.3/forms/overview/#accessibility -->

[应用场景]（Application Scenario）：这类输入框是登录表单、注册页面和用户资料设置的基础。

Bootstrap 文本域

评论:

对于多行文本输入，使用带有 .form-control 类的 <textarea> [元素]（Element）：

<form>
  <div class="mb-3">
    <label for="commentArea" class="form-label">Comment:</label>
    <textarea class="form-control" id="commentArea" rows="5" placeholder="Leave your comment here"></textarea>
  </div>
</form>

<!-- 提示：rows 属性建议了可见的行数。在大多数浏览器中，textarea 默认支持垂直调整大小。 -->

应用场景：文本域非常适合用于反馈表单、产品评论或任何需要详细文本输入的场景。

Bootstrap 复选框

选项 1

选项 2

选项 3 (禁用)

复选框允许用户从列表中选择零个或多个选项。Bootstrap 5 使用特定的结构，包括 .form-check、.form-check-input 和 .form-check-label 类。

以下示例包含三个复选框。最后一个选项被[禁用]（Disabled）：

<form>
  <div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" value="" id="checkOption1">
    <label class="form-check-label" for="checkOption1">
      Option 1
    </label>
  </div>
  <div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" value="" id="checkOption2" checked>
    <label class="form-check-label" for="checkOption2">
      Option 2 (pre-selected)
    </label>
  </div>
  <div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" value="" id="checkOption3" disabled>
    <label class="form-check-label" for="checkOption3">
      Option 3 (disabled)
    </label>
  </div>
</form>

<!-- 最佳实践：每个复选框及其 label 都应包裹在 div.form-check 中。input 的 id 必须与 label 的 for 属性匹配，以确保可访问性。 -->

要在同一行显示复选框，可以将每个 .form-check 元素包裹在一个父级 div 中，并为每个 .form-check div 应用 .form-check-inline 类：

选项 1 选项 2 选项 3

<form>
  <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">Option 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">Option 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">Option 3 (disabled)</label>
  </div>
</form>

Bootstrap 单选按钮

选项 1

选项 2

选项 3 (禁用)

单选按钮将用户的选择限制为列表中的单个选项。它们的结构与复选框相似，使用了 .form-check、.form-check-input 和 .form-check-label。

以下示例展示了三个单选按钮。最后一个选项被禁用。请注意使用 name 属性对它们进行[分组]（Grouping）：

<form>
  <div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="radioOptions" id="radioOption1" value="option1" checked>
    <label class="form-check-label" for="radioOption1">
      Option 1 (selected by default)
    </label>
  </div>
  <div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="radioOptions" id="radioOption2" value="option2">
    <label class="form-check-label" for="radioOption2">
      Option 2
    </label>
  </div>
  <div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="radioOptions" id="radioOption3" value="option3" disabled>
    <label class="form-check-label" for="radioOption3">
      Option 3 (disabled)
    </label>
  </div>
</form>

<!-- 重要提示：同一组中的所有单选按钮必须共享相同的 name 属性，以确保只能选择其中一个。 -->

要在同一行显示单选按钮，请为每个 .form-check 包装器使用 .form-check-inline 类：

选项 1 选项 2 选项 3

<form>
  <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">Option 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">Option 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">Option 3 (disabled)</label>
  </div>
</form>

应用场景：单选按钮用于性别选择、支付方式选项或只允许选择一个答案的调查问卷等场景。

Bootstrap 选择列表

选择列表（选择一个）：

1 2 3 4

多选列表（按住 Ctrl/Cmd 选择多个）：

1 2 3 4 5

选择列表（也称[下拉列表]（Dropdowns））允许用户从多个选项中进行选择。使用 .form-select 类来获取 Bootstrap 定制的选择菜单样式。

以下示例包含一个标准的单选下拉列表：

<form>
  <div class="mb-3">
    <label for="selectList1" class="form-label">Select list (single choice):</label>
    <select class="form-select" id="selectList1" aria-label="Default select example">
      <option selected>Open this select menu</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
  </div>

  <div class="mb-3">
    <label for="selectListMultiple" class="form-label">Multiple select list:</label>
    <select class="form-select" id="selectListMultiple" multiple aria-label="Multiple select example">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
    </select>
    <div class="form-text">Hold Ctrl (Windows) or Cmd (Mac) to select multiple options.</div>
  </div>
</form>

<!-- 提示：如果想要更原生的外观，仍然可以在 <select> 上使用 .form-control，但 .form-select 提供了 Bootstrap 的定制样式。 -->

应用场景：选择列表适用于选择国家、选择分类，或任何具有预定义列表且选项互斥（如果使用了 multiple 属性则可以多选）的场景。