表单是网站与用户交互的重要组件，用于收集用户输入、处理数据和完成各种任务。Bootstrap 4 提供了丰富的表单控件和样式，帮助开发者快速创建专业的表单界面。
Bootstrap 4 提供了多种表单控件，包括文本输入、选择框、复选框、单选按钮等。
<form>
<div class="form-group">
<label for="exampleInputEmail1">邮箱地址</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="输入邮箱">
<small id="emailHelp" class="form-text text-muted">我们绝不会与他人共享您的邮箱地址。</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">示例文本区域</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="输入多行文本"></textarea>
</div>
</form>
<div class="form-group">
<label for="exampleFormControlSelect1">示例选择框</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>选项 1</option>
<option>选项 2</option>
<option>选项 3</option>
<option>选项 4</option>
<option>选项 5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">多选示例</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>选项 1</option>
<option>选项 2</option>
<option>选项 3</option>
<option>选项 4</option>
<option>选项 5</option>
</select>
</div>
Bootstrap 4 提供了多种样式的复选框和单选按钮，包括自定义样式。
<!-- 默认复选框 -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
默认复选框
</label>
</div>
<!-- 默认单选按钮 -->
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
默认单选按钮
</label>
</div>
<!-- 自定义复选框 -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">自定义复选框</label>
</div>
<!-- 自定义单选按钮 -->
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">打开此自定义单选按钮</label>
</div>
<!-- 自定义开关 -->
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">切换此开关元素</label>
</div>
Bootstrap 4 提供了多种表单布局选项，包括水平表单、内联表单和网格布局。
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="邮箱">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="密码">
</div>
</div>
<!-- 其他表单字段 -->
</form>
Bootstrap 4 提供了强大的表单验证功能，包括浏览器默认验证和自定义验证样式。
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom01">名字</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
看起来不错！
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationCustom02">姓氏</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
看起来不错！
</div>
</div>
</div>
<!-- 其他表单字段 -->
</form>
// 表单验证示例
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
输入组允许您在输入框前后添加文本、按钮或其他元素。
<!-- 带前置文本的输入组 -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<!-- 文件上传输入组 -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">上传</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01">选择文件</label>
</div>
</div>
创建表单时，遵循以下最佳实践可以提升用户体验和可访问性。