Bootstrap 表单

Bootstrap 的表单样式

Bootstrap 5 大幅改进了表单样式，以提供更一致的外观、更好的自定义能力和更高的 accessibility（可访问性）。表单控件会自动获得一些全局样式。

关键的 class 包括用于文本输入（<input>、<textarea>、<select>）的 .form-control，用于自定义 select menu（选择菜单）的 .form-select，以及用于 checkbox（复选框）和 radio（单选按钮）的 .form-check。在它们的父容器内，这些元素默认宽度通常为 100%。

Bootstrap 表单布局

Bootstrap 5 提供了灵活的表单布局方式，主要利用其 grid system 和 utility class（工具类）。常见的布局包括：

默认（堆叠）表单
水平表单（标签和控件在同一行）
内联表单（多个控件在单行，紧凑）

Bootstrap 表单的一般准则：

将 label（标签）和表单控件包裹在一个 <div> 中（通常带有 mb-3 等 margin utility class）以获得正确的间距。较旧的 .form-group class 已不再使用。
使用与其控件相关联的 <label> 元素（通过 for 属性匹配控件的 id）。这对于 accessibility 至关重要。
为所有文本类型的 <input>、<textarea> 元素添加 .form-control class。为 <select> 元素使用 .form-select。
使用 .form-check、.form-check-input 和 .form-check-label class 来组织 checkbox 和 radio button。

Bootstrap 默认（堆叠）表单

这是最基本的表单布局，其中 label 显示在其各自的输入字段上方。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stacked Form Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
  <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">Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

请注意使用 mb-3 来控制表单组之间的间距，以及使用 .form-check、.form-check-input 和 .form-check-label 构建 checkbox 的新结构。

Bootstrap 内联表单（使用 Grid/Flex）

要创建元素位于单行水平排列的表单，Bootstrap 5 鼓励使用其 grid system（特别是 row columns 或 col-auto）或 flexbox utility class。先前 Bootstrap 版本中的 .form-inline class 已被移除。

这是一个使用 grid 的 col-auto 实现内联布局的示例：

<!DOCTYPE html>
<html lang="en">
<body>
<div class="container mt-3">
  <form class="row gx-3 gy-2 align-items-center">
    <div class="col-auto">
      <label class="visually-hidden" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-text">@</div>
        <input type="text" class="form-control" id="inlineFormInputInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </form>
</div>
<!-- Requires Bootstrap CSS and JS -->
</body>
</html>

关键元素：

<form> 使用 .row 和 gutter class，如 gx-3（水平 gutter）和 gy-2（当 item 换行时用于垂直 gutter）。
.col-auto 使 column 的宽度仅与其内容相同。
.visually-hidden 用于在视觉上隐藏 label，同时使其对屏幕阅读器保持可访问性（取代了 .sr-only）。

Bootstrap 水平表单（使用 Grid）

水平表单（其中 label 与其控件在同一行上左对齐）是使用 Bootstrap 的 grid system 构建的。.form-horizontal class 已不再使用。

将 label/控件对包裹在 .row 中（通常带有 mb-3 用于间距）。将 grid column class（例如 .col-sm-2、.col-sm-10）分配给 <label> 和包裹控件的 <div>。在 label 上使用 .col-form-label 以便与表单控件实现正确的垂直对齐。

<!DOCTYPE html>
<html lang="en">
<body>
<div class="container mt-3">
  <form>
    <div class="row mb-3">
      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3">
      </div>
    </div>
    <div class="row mb-3">
      <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3">
      </div>
    </div>
    <fieldset class="row mb-3">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <!-- Add more radios or checkboxes as needed -->
      </div>
    </fieldset>
    <div class="row mb-3">
      <div class="col-sm-10 offset-sm-2">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="gridCheck1">
          <label class="form-check-label" for="gridCheck1">
            Example checkbox
          </label>
        </div>
      </div>
    </div>
    <div class="row">
        <div class="col-sm-10 offset-sm-2">
            <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
    </div>
  </form>
</div>
<!-- Requires Bootstrap CSS and JS -->
</body>
</html>

.offset-sm-2 class 将 checkbox 和 button group 推到与输入字段对齐的位置，有效地跳过了 label column 的宽度。

Bootstrap 5 中其他一些此处未深入介绍的重要表单功能包括：Floating labels（浮动标签）、Input groups（输入组）、Validation styles（验证样式）以及更高级的 Select menu。请查阅官方 Bootstrap 文档以获取更多信息。