Bootstrap - 表单

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

基本形式

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

以下示例演示了 Boostrap 的基本形式。

例子

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

  <!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>

残疾人表格

要防止用户交互并使输入显得更轻，请使用禁用的布尔属性。
要禁用<fieldset>中的所有控件，请添加禁用属性。字段集 <disabled> 中包含的本机表单控件的<input>、<select>和<button>元素均被浏览器视为已禁用，从而阻止键盘和鼠标与它们交互。
如果表单具有自定义的类似按钮的元素，例如<a class="btn btn-*">...</a>，则它们具有指针事件：无设置，这意味着它们仍然可聚焦且可通过键盘操作。为了防止他们获得焦点，请使用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/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>

无障碍

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