Bootstrap 5学习教程，从入门到精通，Bootstrap 5 表单语法知识点及案例（28）
Bootstrap 5 表单语法知识点及案例
Bootstrap 5 提供了强大而灵活的表单控件和布局选项。
一、基础表单结构
Bootstrap 5 表单需要以下基本结构：
<form>
form>
基础表单示例
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap 5 基础表单title>
head>
<body>
<div class="container mt-5">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">邮箱地址label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<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">
div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">记住我label>
div>
<button type="submit" class="btn btn-primary">提交button>
form>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
body>
html>
二、表单控件
1. 输入框 (Input)
Bootstrap 5 提供了多种输入框样式：
<div class="mb-3">
<label for="textInput" class="form-label">文本输入label>
<input type="text" class="form-control" id="textInput" placeholder="请输入文本">
div>
<div class="mb-3">
<label for="emailInput" class="form-label">邮箱输入label>
<input type="email" class="form-control" id="emailInput" placeholder="[email protected]">
div>
<div class="mb-3">
<label for="passwordInput" class="form-label">密码输入label>
<input type="password" class="form-control" id="passwordInput">
div>
<div class="mb-3">
<label for="numberInput" class="form-label">数字输入label>
<input type="number" class="form-control" id="numberInput">
div>
<div class="mb-3">
<label for="dateInput" class="form-label">日期输入label>
<input type="date" class="form-control" id="dateInput">
div>
2. 文本域 (Textarea)
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">文本域示例label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3">textarea>
div>
3. 选择框 (Select)
<div class="mb-3">
<label for="exampleFormControlSelect1" class="form-label">选择框示例label>
<select class="form-select" id="exampleFormControlSelect1">
<option selected>请选择...option>
<option value="1">选项一option>
<option value="2">选项二option>
<option value="3">选项三option>
select>
div>
<div class="mb-3">
<label for="exampleFormControlSelect2" class="form-label">多选选择框label>
<select multiple class="form-select" id="exampleFormControlSelect2">
<option value="1">选项一option>
<option value="2">选项二option>
<option value="3">选项三option>
select>
div>
4. 复选框 (Checkbox) 和单选按钮 (Radio)
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
默认复选框
label>
div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
默认选中复选框
label>
div>
div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
默认单选按钮
label>
div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
默认选中单选按钮
label>
div>
div>
<div class="mb-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">开关样式复选框label>
div>
div>
5. 范围选择 (Range)
<div class="mb-3">
<label for="customRange1" class="form-label">范围选择示例label>
<input type="range" class="form-range" id="customRange1">
div>
6. 文件上传 (File Input)
<div class="mb-3">
<label for="formFile" class="form-label">默认文件上传label>
<input class="form-control" type="file" id="formFile">
div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">多文件上传label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
div>
三、表单布局
1. 表单网格布局
Bootstrap 5 可以使用网格系统来布局表单。
<form>
<div class="row mb-3">
<div class="col">
<label for="firstName" class="form-label">名字label>
<input type="text" class="form-control" placeholder="名字" id="firstName">
div>
<div class="col">
<label for="lastName" class="form-label">姓氏label>
<input type="text" class="form-control" placeholder="姓氏" id="lastName">
div>
div>
<div class="row mb-3">
<div class="col-md-6">
<label for="city" class="form-label">城市label>
<input type="text" class="form-control" id="city">
div>
<div class="col-md-4">
<label for="state" class="form-label">省份label>
<select id="state" class="form-select">
<option selected>选择...option>
<option>北京option>
<option>上海option>
<option>广东option>
select>
div>
<div class="col-md-2">
<label for="zip" class="form-label">邮编label>
<input type="text" class="form-control" id="zip">
div>
div>
<button type="submit" class="btn btn-primary">注册button>
form>
2. 水平表单
使用网格系统创建水平排列的表单：
<form>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">邮箱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">密码label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
div>
div>
<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">
记住我
label>
div>
div>
div>
<button type="submit" class="btn btn-primary">登录button>
form>
四、表单验证
Bootstrap 5 提供了客户端表单验证样式。
1. 浏览器默认验证
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="validationCustom01" class="form-label">名字label>
<input type="text" class="form-control" id="validationCustom01" required>
<div class="valid-feedback">
看起来不错!
div>
<div class="invalid-feedback">
请输入您的名字
div>
div>
<div class="mb-3">
<label for="validationCustom02" class="form-label">姓氏label>
<input type="text" class="form-control" id="validationCustom02" required>
<div class="valid-feedback">
看起来不错!
div>
<div class="invalid-feedback">
请输入您的姓氏
div>
div>
<div class="mb-3">
<label for="validationCustomUsername" class="form-label">用户名label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
请选择一个用户名
div>
div>
div>
<div class="mb-3">
<label for="validationCustom03" class="form-label">城市label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
请提供有效的城市
div>
div>
<div class="mb-3">
<label for="validationCustom04" class="form-label">省份label>
<select class="form-select" id="validationCustom04" required>
<option selected disabled value="">选择...option>
<option>北京option>
<option>上海option>
<option>广东option>
select>
<div class="invalid-feedback">
请选择一个省份
div>
div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
同意条款和条件
label>
<div class="invalid-feedback">
提交前必须同意条款
div>
div>
div>
<button class="btn btn-primary" type="submit">提交表单button>
form>
<script>
// 验证脚本
(function () {
'use strict'
// 获取所有需要验证的表单
var forms = document.querySelectorAll('.needs-validation')
// 循环并阻止提交
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
script>
2. 服务端验证
<form>
<div class="mb-3">
<label for="serverValidation" class="form-label">用户名label>
<input type="text" class="form-control is-invalid" id="serverValidation" aria-describedby="serverValidationFeedback">
<div id="serverValidationFeedback" class="invalid-feedback">
该用户名已被占用
div>
div>
<button class="btn btn-primary" type="submit">提交button>
form>
五、表单大小
可以设置表单控件的大小：
<div class="mb-3">
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
div>
<div class="mb-3">
<input class="form-control" type="text" placeholder="默认尺寸">
div>
<div class="mb-3">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
div>
<select class="form-select form-select-lg mb-3">
<option selected>大尺寸选择框option>
<option value="1">一option>
<option value="2">二option>
select>
<select class="form-select mb-3">
<option selected>默认尺寸选择框option>
<option value="1">一option>
<option value="2">二option>
select>
<select class="form-select form-select-sm">
<option selected>小尺寸选择框option>
<option value="1">一option>
<option value="2">二option>
select>
六、禁用表单控件
<div class="mb-3">
<label for="disabledInput" class="form-label">禁用输入框label>
<input class="form-control" id="disabledInput" type="text" placeholder="禁用输入" disabled>
div>
<div class="mb-3">
<label for="disabledSelect" class="form-label">禁用选择框label>
<select id="disabledSelect" class="form-select" disabled>
<option>禁用选择option>
select>
div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
不能选择此选项
label>
div>
div>
七、只读表单控件
<div class="mb-3">
<label for="readonlyInput" class="form-label">只读输入框label>
<input class="form-control" id="readonlyInput" type="text" placeholder="只读输入" readonly>
div>
八、表单浮动标签
Bootstrap 5 引入了浮动标签效果：
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">邮箱地址label>
div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">密码label>
div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea">textarea>
<label for="floatingTextarea">评论label>
div>
<div class="form-floating mb-3">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>选择...option>
<option value="1">选项一option>
<option value="2">选项二option>
<option value="3">选项三option>
select>
<label for="floatingSelect">选择选项label>
div>
九、输入组
可以在输入框前后添加文本、按钮或按钮组：
<div class="input-group mb-3">
<span class="input-group-text">@span>
<input type="text" class="form-control" placeholder="用户名">
div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="收件人用户名">
<span class="input-group-text">@example.comspan>
div>
<div class="input-group mb-3">
<span class="input-group-text">￥span>
<input type="text" class="form-control">
<span class="input-group-text">.00span>
div>
<div class="input-group mb-3">
<span class="input-group-text">简介span>
<textarea class="form-control">textarea>
div>
<div class="input-group mb-3">
<span class="input-group-text">
<input class="form-check-input mt-0" type="checkbox">
span>
<input type="text" class="form-control">
div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">按钮button>
<input type="text" class="form-control">
div>
<div class="input-group mb-3">
<input type="text" class="form-control">
<button class="btn btn-outline-secondary" type="button">按钮button>
div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">选项button>
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
下拉菜单
button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">操作a>li>
<li><a class="dropdown-item" href="#">另一个操作a>li>
ul>
<input type="text" class="form-control">
div>
十、综合案例
下面是一个完整的用户注册表单示例，包含了多种表单元素和验证：
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 用户注册表单title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.registration-form {
background: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.form-title {
text-align: center;
margin-bottom: 30px;
color: #495057;
}
style>
head>
<body>
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="registration-form">
<h2 class="form-title">用户注册h2>
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="username" class="form-label">用户名label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@span>
<input type="text" class="form-control" id="username"
aria-describedby="inputGroupPrepend usernameHelp" required>
<div class="invalid-feedback">
请输入有效的用户名
div>
div>
<div id="usernameHelp" class="form-text">4-20个字符，只能包含字母、数字和下划线div>
div>
<div class="row mb-3">
<div class="col-md-6">
<label for="password" class="form-label">密码label>
<input type="password" class="form-control" id="password" required>
<div class="invalid-feedback">
请输入密码
div>
div>
<div class="col-md-6">
<label for="confirmPassword" class="form-label">确认密码label>
<input type="password" class="form-control" id="confirmPassword" required>
<div class="invalid-feedback">
请再次输入密码
div>
div>
div>
<div class="row mb-3">
<div class="col-md-6">
<label for="firstName" class="form-label">名字label>
<input type="text" class="form-control" id="firstName" required>
<div class="invalid-feedback">
请输入您的名字
div>
div>
<div class="col-md-6">
<label for="lastName" class="form-label">姓氏label>
<input type="text" class="form-control" id="lastName" required>
<div class="invalid-feedback">
请输入您的姓氏
div>
div>
div>
<div class="row mb-3">
<div class="col-md-6">
<label for="email" class="form-label">邮箱地址label>
<input type="email" class="form-control" id="email" required>
<div class="invalid-feedback">
请输入有效的邮箱地址
div>
div>
<div class="col-md-6">
<label for="phone" class="form-label">手机号码label>
<input type="tel" class="form-control" id="phone" required>
<div class="invalid-feedback">
请输入有效的手机号码
div>
div>
div>
<div class="mb-3">
<label for="address" class="form-label">地址label>
<input type="text" class="form-control" id="address" required>
<div class="invalid-feedback">
请输入您的地址
div>
div>
<div class="row mb-3">
<div class="col-md-4">
<label for="city" class="form-label">城市label>
<input type="text" class="form-control" id="city" required>
<div class="invalid-feedback">
请输入您的城市
div>
div>
<div class="col-md-4">
<label for="state" class="form-label">省份label>
<select class="form-select" id="state" required>
<option selected disabled value="">选择...option>
<option>北京option>
<option>上海option>
<option>广东option>
<option>江苏option>
<option>浙江option>
select>
<div class="invalid-feedback">
请选择您的省份
div>
div>
<div class="col-md-4">
<label for="zip" class="form-label">邮编label>
<input type="text" class="form-control" id="zip" required>
<div class="invalid-feedback">
请输入有效的邮编
div>
div>
div>
<div class="mb-3">
<label for="birthday" class="form-label">生日label>
<input type="date" class="form-control" id="birthday">
div>
<div class="mb-3">
<label class="form-label">性别label>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="male" value="male">
<label class="form-check-label" for="male">
男
label>
div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="female" value="female">
<label class="form-check-label" for="female">
女
label>
div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="other" value="other">
<label class="form-check-label" for="other">
其他
label>
div>
div>
<div class="mb-3">
<label class="form-label">兴趣爱好 (可选)label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="sports" value="sports">
<label class="form-check-label" for="sports">
运动
label>
div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="music" value="music">
<label class="form-check-label" for="music">
音乐
label>
div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="reading" value="reading">
<label class="form-check-label" for="reading">
阅读
label>
div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="travel" value="travel">
<label class="form-check-label" for="travel">
旅行
label>
div>
div>
<div class="mb-3">
<label for="bio" class="form-label">个人简介label>
<textarea class="form-control" id="bio" rows="3">textarea>
div>
<div class="mb-3">
<label for="avatar" class="form-label">上传头像label>
<input class="form-control" type="file" id="avatar">
div>
<div class="mb-3 form-check">
<input class="form-check-input" type="checkbox" id="agreeTerms" required>
<label class="form-check-label" for="agreeTerms">
我同意<a href="#">服务条款a>和<a href="#">隐私政策a>
label>
<div class="invalid-feedback">
您必须同意条款才能注册
div>
div>
<div class="d-grid gap-2">
<button class="btn btn-primary btn-lg" type="submit">注册button>
div>
form>
div>
div>
div>
div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">script>
<script>
(function () {
'use strict'
// 获取所有需要验证的表单
var forms = document.querySelectorAll('.needs-validation')
// 循环并阻止提交
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
script>
body>
html>
总结
Bootstrap 5 提供了丰富而强大的表单组件和布局选项，包括：
- 各种表单控件：输入框、选择框、复选框、单选按钮等
- 灵活的布局选项：网格布局、水平表单等
- 表单验证：客户端验证样式和服务端验证样式
- 表单大小控制：大、默认和小尺寸
- 禁用和只读状态
- 浮动标签效果
- 输入组功能