Bootstrap 4 表单
Bootstrap 4 的默认设置
在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
表单控件会自动接收一些带有 Bootstrap 的全局样式:
具有 .form-control 类的所有文本 <input>, <textarea> 和
<select> 元素的宽度均为 100%。
Bootstrap 4 表单布局
提供了两种类型的表单布局:
- 堆叠表单
- 内联表单
Bootstrap 4 堆叠表单
以下实例使用两个输入框，一个复选框，一个提交按钮来创建堆叠表单
在每个表单控件周围添加一个带有 .form-group 的包装器元素，以确保适当的边距:
实例
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
亲自试一试 »
Bootstrap 内联表单
所有内联表单中的元素都是左对齐的。
注意:在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。
内联表单的附加规则:
- 内联表单需要在
<form>元素上添加.form-inline类。
以下实例使用两个输入框，一个复选框，一个提交按钮来创建内联表单:
实例
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
亲自试一试 »
带有实用程序的内联表单
上面的内联表单感觉"被压缩"了，并且使用 Bootstrap 的间距实用程序看起来会更好。 以下示例为所有设备（小型及以上）上的每个输入添加一个右边距 (.mr-sm-2)。 边距底部类 (.mb-2) 用于在输入字段中断时设置其样式（由于空间/宽度不足而从水平变为垂直）:
实例
<form class="form-inline" action="/action_page.php">
<label for="email" class="mr-sm-2">Email address:</label>
<input type="email" class="form-control mb-2 mr-sm-2" placeholder="Enter email" id="email">
<label for="pwd" class="mr-sm-2">Password:</label>
<input type="password" class="form-control mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
亲自试一试 »
您将在我们的Bootstrap 4 实用程序章节中了解有关间距和其他“帮助”类的更多信息。
表格行/网格
您还可以使用列 (.col) 来控制表单输入的宽度和对齐方式，而无需使用间距实用程序。 请记住将它们放在 .row 容器中。
在下面的示例中，我们使用并排显示的两列。 您将在Bootstrap 网格章节中了解更多关于列和行的信息。
实例
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
亲自试一试 »
如果您想要更少的网格边距（覆盖默认列间距），请使用 .form-row 而不是 .row< /代码>:
实例
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
亲自试一试 »
表单验证
您可以使用不同的验证类向用户提供有价值的反馈。 将 .was-validated 或 .needs-validation 添加到 <form> 元素，
取决于您是想在提交表单之前还是之后提供验证反馈。 输入字段将具有绿色（有效）或红色（无效）边框，以指示表单中缺少的内容。 您还可以添加 .valid-feedback 或 .invalid-feedback 消息来明确告诉用户缺少什么 ，或者需要在提交表单之前完成。
实例
在这个例子中，我们使用 .was-validated 来表明在提交表单之前缺少什么:
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
亲自试一试 »
实例
在这个例子中，我们使用了.needs-validation，它会在表单提交之后添加验证效果（如果有什么遗漏的话）。
请注意，您还必须添加一些 jQuery 代码才能使此示例正常工作:
<form action="/action_page.php" class="needs-validation" novalidate>
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
// 如果存在无效字段，则禁用表单提交
(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);
})();
</script>
亲自试一试 »
