Bootstrap 简明教程

Bootstrap - Forms

本章将讨论 Bootstrap 表单。表单便于用户输入数据，例如姓名、电子邮件地址、密码等，然后可以将其发送到服务器进行处理。Bootstrap 提供了各种类来创建各种具有不同样式、布局和自定义组件的表单。

Basic form

Bootstrap 中的表单控件使用类扩展了 Rebooted form styles 。为了使用定制显示在不同浏览器和设备上实现一致的呈现，请使用这些类。
要使用较新的输入控件，例如电子邮件验证、数字选择和其他功能，请务必对所有输入（例如，用于电子邮件地址的电子邮件或用于数字数据的数字）使用适当的 type 属性。

以下示例演示了 Bootstrap 的基本表单。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <form>
      <div class="mb-3">
        <label for=" sampleInputEmail" class="form-label">Username</label>
        <input type="email" class="form-control" id=" sampleInputEmail" aria-describedby="emailHelp">
      </div>
      <div class="mb-3">
        <label for="sampleInputPassword" class="form-label">Password</label>
        <input type="password" class="form-control" id="sampleInputPassword">
      </div>
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="sampleCheck">
        <label class="form-check-label" for="sampleCheck">Remember me</label>
      </div>
      <button type="submit" class="btn btn-primary">Log in</button>
    </form>
  </body>
  </html>

Disabled forms

要防止用户交互并使输入看起来较浅，请使用 disabled 布尔属性。
要禁用 <fieldset> 中的所有控件，请添加 disabled 属性。包含在字段集 <disabled> 中的原生表单控件的 * <input>*, <select> 和 <button> 元素都将被浏览器视为已禁用，从而阻止了键盘和鼠标与它们的交互。
如果表单具有自定义的类比按钮元素，例如 <a class="btn btn- ">…</a>*, 则它们已设置 pointer-events: none ，这意味着它们仍然可获取焦点并可通过键盘操作。要阻止它们接收焦点，请使用 tabindex="-1" 并在 aria-disabled="disabled" 中使用来向辅助技术发信号通知其状态。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Form</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <form>
      <fieldset disabled>
        <div class="mb-3">
          <label for="disabledEmailInput" class="form-label">Disabled Input</label>
          <input type="text" id="disabledEmailInput" class="form-control" placeholder="Email Id">
        </div>
        <div class="mb-3">
          <label for="disabledPasswordInput" class="form-label">Disabled Input</label>
          <select id="disabledPasswordInput" class="form-select">
            <option>Password</option>
          </select>
        </div>
        <div class="mb-3">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="disabledcheckbox" disabled>
            <label class="form-check-label" for="disabledcheckbox">
              Disabled Check Box
            </label>
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Disabled Button</button>
      </fieldset>
    </form>
  </body>
  </html>

Accessibility

每个表单控件都有一个适当的可访问名称，以便辅助技术用户使用。使用 <button>…</button> 内的标签元素或描述性文本是最简单的方法来实现这一点。
当没有提供可见的“标签”或适当的文本内容时，则使用其他方法来实现可访问的名称，例如：使用类 .visually-hidden 隐藏 <label> 元素。使用 aria-labelledby 指向充当 <label> 的现有元素。包括一个标题属性。使用 aria-label 设置元素的无障碍名称。
当所有这些都不可用时，对于无障碍名称辅助技术，请使用 placeholder 属性作为 <input> 和 <textarea> 元素的回退。
使用视觉隐藏内容将帮助辅助技术用户，但某些用户可能仍然会遇到缺少可见标签文本的问题。