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表单功能,如日期选择器、验证码等插件,可以根据需求进行使用。