Bootstrap5 表单

概述

Bootstrap 是一个流行的前端框架，它提供了丰富的组件和工具来简化网页开发。Bootstrap5 是 Bootstrap 的最新版本，它引入了许多新特性和改进。在本篇文章中，我们将深入探讨 Bootstrap5 中的表单组件，包括其结构、样式、验证和响应式设计。

表单结构

Bootstrap5 的表单组件由几个基本元素组成：

<form>：包裹所有表单元素的容器。
<label>：为输入元素提供标签。
<input>、<textarea> 和 <select>：表单输入元素。
<button> 或 <input type="submit">：提交表单的按钮。

以下是一个基本的 Bootstrap5 表单结构示例：

<form><label for="inputName">姓名：</label><input type="text" id="inputName" name="name" placeholder="请输入您的姓名"><label for="inputEmail">邮箱：</label><input type="email" id="inputEmail" name="email" placeholder="请输入您的邮箱"><button type="submit">提交</button>
</form>

表单样式

Bootstrap5 提供了丰富的样式类，用于美化表单元素。以下是一些常用的样式类：

.form-control：应用于 <input>、<textarea> 和 <select> 元素，为它们提供统一的样式。
.form-group：应用于表单内的分组元素，如标签和输入框。
.form-check：应用于复选框和单选按钮。
.form-range：应用于范围滑块。

以下是一个应用了 Bootstrap5 样式的表单示例：

<form><div class="form-group"><label for="inputName">姓名：</label><input type="text" class="form-control" id="inputName" name="name" placeholder="请输入您的姓名"></div><div class="form-group"><label for="inputEmail">邮箱：</label><input type="email" class="form-control" id="inputEmail" name="email" placeholder="请输入您的邮箱"></div><div class="form-check"><input type="checkbox" class="form-check-input" id="checkAgree"><label class="form-check-label" for="checkAgree">我同意服务条款</label></div><button type="submit" class="btn btn-primary">提交</button>
</form>

表单验证

Bootstrap5 提供了丰富的表单验证功能，包括内置的验证样式和自定义验证器。以下是一些常用的验证功能：

验证状态类：.is-valid、.is-invalid、.is-pending。
自定义验证器：通过监听 input 事件，可以自定义验证逻辑。

以下是一个应用了 Bootstrap5 验证功能的表单示例：

<form><div class="form-group"><label for="inputName">姓名：</label><input type="text" class="form-control" id="inputName" name="name" placeholder="请输入您的姓名"><div class="invalid-feedback">请输入您的姓名</div></div><div class="form-group"><label for="inputEmail">邮箱：</label><input type="email" class="form-control" id="inputEmail" name="email" placeholder="请输入您的邮箱"><div class="invalid-feedback">请输入有效的邮箱地址</div></div><button type="submit" class="btn btn-primary">提交</button>
</form>

响应式设计

Bootstrap5 的表单组件支持响应式设计，可以根据屏幕尺寸自动调整布局。以下是一些常用的响应式样式类：

.form-control-sm：应用于小型输入框。
.form-control-lg：应用于大型输入框。
.form-row：应用于水平排列的表单元素。

以下是一个应用了 Bootstrap5 响应式设计的表单示例：

<form><div class="form-group"><label for="inputName">姓名：</label><input type="text" class="form-control form-control-sm" id="inputName" name="name" placeholder="请输入您的姓名"></div><div class="form-group"><label for="inputEmail">邮箱：</label><input type="email" class="form-control form-control-lg" id="inputEmail" name="email" placeholder="请输入您的邮箱"></div><div class="form-row"><div class="col-12 col-md-6"><div class="form-group"><label for="inputPassword">密码：</label><input type="password" class="form-control" id="inputPassword" name="password" placeholder="请输入您的密码"></div></div><div class="col-12 col-md-6"><div class="form-group"><label for="inputConfirmPassword">确认密码：</label><input type="password" class="form-control" id="inputConfirmPassword" name="confirmPassword" placeholder="请再次输入您的密码"></div></div></div><button type="submit" class="btn btn-primary">提交</button>
</form>