Bootstrap-5 表单介绍

Bootstrap 是一个流行的前端框架，它提供了许多功能强大的组件，其中包括表单组件。在这篇文章中，我们将深入介绍 Bootstrap-5 表单组件的使用和示例。

表单基础

在 Bootstrap-5 中，表单是由表单元素、标签和控制组成的，通过这些元素，用户可以提交数据。以下是 Bootstrap-5 表单元素的一些基本结构：

<form>
  <div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="mb-3">
    <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

• 表单需包含一个形式的form标签。
• form标签内需要包含一些必需的表单元素，如输入，选择和文本区域等。
• 每个表单元素和标签都需要添加相应的Bootstrap-5类来获得样式。

输入型表单组件

Bootstrap-5 提供了多种类型的输入型表单组件，包括文本框、密码框、下拉框、多选框和单选框等。下面我们来一个一个介绍这些组件。

文本框

文本框组件是 Bootstrap-5 表单组件中使用最多的一个组件，它支持多种不同的 input type 类型，比如text，password，email，number 等，同时也支持input size 属性等。以下是一个使用form-control class 的标准的 Bootstrap-5 文本框组件：

<label for="exampleFormControlInput1" class="form-label">Text input</label>
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Enter text">

想要使用特定的 type 和 size，可以加入额外的 class 和属性：

<input type="email" class="form-control form-control-lg" id="exampleFormControlInput1" placeholder="Email">
<input type="password" class="form-control form-control-sm" id="inputPassword5" aria-describedby="passwordHelpBlock">

下拉框

下拉框组件可以通过Bootstrap-5 的select元素创建。以下是基本的select元素：

<label for="exampleFormControlSelect1" class="form-label">Example select</label>
<select class="form-select" id="exampleFormControlSelect1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

select元素同样支持多项样式，包括设置选中项、改变大小、添加禁用项等。选择项也可以添加图标和其他定制样式。

多选框

多选框是一种选择多个值的表单控件。它可以将多个选项展示在一个列表中，然后通过选中列表中的多个选项来进行多项选择。以下是一个使用 Bootstrap-5 的多选框组件：

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

这里，form-check 样式类用于定制多选框。而 checkbox 类则是用来标记哪些选项需要选择。 还可以使用不同的样式定制多选框，比如 classname=“form-check-inline” 样式类，这个样式类用于在同一行内展示多个选项：

<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">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">2</label>
</div>

单选框

单选框组件与多选框组件类似，也是一种用于选择单个项目的表单控件。但与多选框组件不同的是，单选框组件在同一时间只能选择一个项目。以下是一个使用 Bootstrap-5 单选框组件：

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>

单选框组件同样支持多项样式定制，可以通过 classname=“form-check-inline” 样式类将一组单选按钮展示在同一行内。

表单验证

Bootstrap-5 提供了用于表单验证的类和样式，比如在输入初始值后验证表格，提示客户如何解决错误，等等。通过表单验证功能，可以确保表格数据的完整性和一致性。

状态标记

首先，当提交表单时，Bootstrap-5 会自动为正确和错误的表格添加不同的状态标记。

正确表格对应的状态标记为 .is-valid ；错误表格对应的状态标记为 .is-invalid 。

标记类型都是作为 CSS 类附加到表格控件的父元素上的。以下是一个验证表单的示例：

<div class="form-group">
  <label for="exampleInputEmail1">Email address</label>
  <input type="email" class="form-control is-valid" id="exampleInputEmail1" aria-describedby="emailHelp">
  <div class="valid-feedback">
    Looks good!
  </div>
</div>

自定义验证

Bootstrap-5 也提供自定义验证的方式。自定义验证能满足开发者的特殊需求。以下是自定义验证的基本示例：

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="validationCustom01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
    <div class="invalid-feedback">
      Please provide a valid first name.
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustom02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
    <div class="invalid-feedback">
      Please provide a valid last name.
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustomUsername" class="form-label">Username</label>
    <div class="input-group">
      <span class="input-group-text" id="inputGroupPrepend">@</span>
      <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
      <div class="invalid-feedback">
        Please choose a username.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationCustom03" class="form-label">City</label>
    <input type="text" class="form-control" id="validationCustom03" required>
    <div class="invalid-feedback">
      Please provide a valid city.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom04" class="form-label">State</label>
    <select class="form-select" id="validationCustom04" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-feedback">
      Please select a valid state.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom05" class="form-label">Zip</label>
    <input type="text" class="form-control" id="validationCustom05" required>
    <div class="invalid-feedback">
      Please provide a valid zip.
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

这里添加了一个属性（ required） ，这个属性可以确保表单验证必须被执行。而“.invalid-feedback”类是一种错误提示框，Inner HTML 内容会被自动弹出。

同时，Bootstrap-5 表单还支持使用 JavaScript 验证自定义输入内容。对于这一部分可以查看 Bootstrap 5.0 官方文档。