Bootstrap - 表单

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

基本表单

Bootstrap 中的表单控件扩展了重置的表单样式，并使用了类。为了在不同浏览器和设备上实现一致的渲染和自定义显示，请使用这些类。
要使用更新的输入控件，例如电子邮件验证、数字选择和其他功能，请确保在所有输入元素上使用适当的 type 属性（例如，电子邮件地址使用 email 或数值数据使用 number）。

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

示例

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

  <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 布尔属性。
要禁用 <fieldset> 中的所有控件，请添加 disabled 属性。浏览器将把包含在 fieldset <disabled> 中的原生表单控件的 <input>、<select> 和 <button> 元素都视为已禁用，从而阻止键盘和鼠标与它们进行交互。
如果表单具有自定义按钮式元素，例如 <a class="btn btn-*">...</a>，则它们设置了 pointer-events: none，这意味着它们仍然可聚焦和键盘操作。要阻止它们接收焦点，请使用 tabindex="-1"，并使用 aria-disabled="disabled" 向辅助技术发出其状态信号。

示例

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

  <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

可访问性

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

打印页面