Bootstrap5 表单
Bootstrap5 表单是基于最新版本的Bootstrap框架开发的，提供了一系列方便快捷的表单组件，可以灵活地满足开发者的需求。本文将详细介绍Bootstrap5表单的各种用法和组件。
一、表单基础 Bootstrap5表单包含的基础组件如下：
- 表单（form）
- 输入框（input）
- 单选框（radio）
- 复选框（checkbox）
- 下拉菜单（select）
- 文件上传（file）
- 按钮（button）
二、表单使用说明
- 表单（form）： 使用表单时需添加form标签，如下所示：
<form>
<!-- 表单组件 -->
</form>
- 输入框（input）： 使用input标签创建输入框，如下所示：
<input type="text" class="form-control" placeholder="请输入内容">
其中type为输入框类型，class为控制输入框样式的class，placeholder为输入框提示信息。
- 单选框（radio）： 使用div和label标签创建单选框，如下所示：
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
<label class="form-check-label" for="exampleRadios1">
Option 1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Option 2
</label>
</div>
其中name为单选框名称，id为单选框id，value为单选框选项。
- 复选框（checkbox）： 使用div和label标签创建复选框，如下所示：
<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>
其中value为复选框值，id为复选框id。
- 下拉菜单（select）： 使用select和option标签创建下拉菜单，如下所示：
<select class="form-select" aria-label="Default select example">
<option selected>请选择</option>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
其中aria-label为下拉菜单名称。
- 文件上传（file）： 使用input标签创建文件上传框，如下所示：
<div class="input-group">
<input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
其中id和aria-label为文件上传框名称。
- 按钮（button）： 使用button标签创建按钮，如下所示：
<button type="button" class="btn btn-primary">Primary</button>
其中class为按钮样式。
三、表单布局 Bootstrap5表单布局默认为行内设置，可以使用d-block控制布局为块级元素。
<form>
<div class="mb-3">
<label for="exampleInputUsername" class="form-label">用户名</label>
<input type="text" class="form-control" id="exampleInputUsername" placeholder="请输入用户名">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱">
<div id="emailHelp" class="form-text">我们不会分享您的邮箱.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
</div>
<div class="mb-3">
<label for="exampleInputPassword2" class="form-label">确认密码</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="请再次输入密码">
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
四、表单状态 Bootstrap5表单支持多种状态，包括正常、悬停、禁用、无效和有效状态，如下所示：
<form>
<div class="mb-3">
<label for="exampleInputUsername" class="form-label">用户名</label>
<input type="text" class="form-control" id="exampleInputUsername" required>
<div class="valid-feedback">用户名可用！</div>
<div class="invalid-feedback">用户名不能为空！</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" required>
<div class="valid-feedback">密码格式正确！</div>
<div class="invalid-feedback">密码不能为空！</div>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" required>
<label class="form-check-label" for="exampleCheck1">我同意协议</label>
<div class="invalid-feedback">请同意协议！</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
其中，require用于标记必填项；valid-feedback和invalid-feedback用于显示成功或失败时的提示信息。
五、结尾语 Bootstrap5表单提供了丰富的组件和方便快捷的布局方式，可以轻松实现各种表单需求。需要注意的是，除了基础组件外，还可以使用更丰富的插件来扩展Bootstrap5表单功能，如日期选择器、验证码等插件，可以根据需求进行使用。