Bootstrap 4 表单
Bootstrap 4 的默认设置
表单控件在 Bootstrap 中会自动接收一些全局样式
所有文本类型的 <input>、<textarea> 和 <select> 元素，如果带有类 .form-control，则宽度为 100%。
Bootstrap 4 表单布局
Bootstrap 提供两种类型的表单布局
- 堆叠式（全宽）表单
- 内联表单
Bootstrap 4 堆叠式表单
以下示例创建了一个堆叠式表单，其中包含两个输入字段、一个复选框和一个提交按钮。
在每个表单控件周围添加一个带有 .form-group 的包装元素，以确保适当的边距
示例
<form action="/action_page.php">
<div class="form-group">
<label for="email">电子邮件地址：</label>
<input type="email" class="form-control" placeholder="输入电子邮件" id="email">
</div>
<div class="form-group">
<label for="pwd">密码：</label>
<input type="password" class="form-control" placeholder="输入密码" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> 记住我
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
自己尝试 »
Bootstrap 内联表单
在内联表单中，所有元素都是内联的，并左对齐。
注意：这仅适用于宽度至少为 576px 的视窗内的表单。在小于 576px 的屏幕上，它将水平堆叠。
内联表单的附加规则
- 在
<form>元素中添加类.form-inline
以下示例创建了一个内联表单，其中包含两个输入字段、一个复选框和一个提交按钮
示例
<form class="form-inline" action="/action_page.php">
<label for="email">电子邮件地址：</label>
<input type="email" class="form-control" placeholder="输入电子邮件" id="email">
<label for="pwd">密码：</label>
<input type="password" class="form-control" placeholder="输入密码" id="pwd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> 记住我
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
自己尝试 »
内联表单与工具
上面的内联表单感觉有点“压缩”，使用 Bootstrap 的间距工具可以使它看起来更好。以下示例在所有设备（包括小尺寸及以上）上，在每个输入字段上添加一个右外边距 (.mr-sm-2)。此外，还使用了一个底部外边距类 (.mb-2) 来样式化输入字段，当它被分割（由于空间/宽度不足而从水平变为垂直）时。
示例
<form class="form-inline" action="/action_page.php">
<label for="email" class="mr-sm-2">电子邮件地址：</label>
<input type="email" class="form-control mb-2 mr-sm-2" placeholder="输入电子邮件" id="email">
<label for="pwd" class="mr-sm-2">密码：</label>
<input type="password" class="form-control mb-2 mr-sm-2" placeholder="输入密码" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> 记住我
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">提交</button>
</form>
自己尝试 »
您将在我们的 Bootstrap 4 工具类章节 中了解有关间距和其他“辅助”类的更多信息。
表单行/网格
您也可以使用列 (.col) 来控制表单输入的宽度和对齐方式，而无需使用间距工具。只需记住将它们放在 .row 容器中即可。
在下面的示例中，我们使用了两个列，它们将并排显示。您将在 Bootstrap 网格章节 中了解有关列和行的更多信息。
示例
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="输入电子邮件" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="输入密码" 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="输入电子邮件" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="输入密码" name="pswd">
</div>
</div>
</form>
自己尝试 »
表单验证
您可以使用不同的验证类为用户提供有价值的反馈。在 <form> 元素中添加 .was-validated 或 .needs-validation，具体取决于您是要在提交表单之前还是之后提供验证反馈。输入字段将使用绿色（有效）或红色（无效）边框来指示表单中缺少的内容。您还可以添加 .valid-feedback 或 .invalid-feedback 消息，以明确告知用户在提交表单之前缺少什么或需要做什么。
示例
在此示例中，我们使用 .was-validated 来指示在提交表单之前缺少的内容
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label for="uname">用户名：</label>
<input type="text" class="form-control" id="uname" placeholder="输入用户名" name="uname" required>
<div class="valid-feedback">有效。</div>
<div class="invalid-feedback">请填写此字段。</div>
</div>
<div class="form-group">
<label for="pwd">密码：</label>
<input type="password" class="form-control" id="pwd" placeholder="输入密码" name="pswd" required>
<div class="valid-feedback">有效。</div>
<div class="invalid-feedback">请填写此字段。</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required> 我同意 blabla。
<div class="valid-feedback">有效。</div>
<div class="invalid-feedback">勾选此复选框以继续。</div>
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
自己尝试 »
示例
在此示例中，我们使用 .needs-validation，它将在提交表单后（如果缺少任何内容）添加验证效果。请注意，您还需要添加一些 jQuery 代码才能使此示例正常工作
<form action="/action_page.php" class="needs-validation" novalidate>
<div class="form-group">
<label for="uname">用户名：</label>
<input type="text" class="form-control" id="uname" placeholder="输入用户名" name="uname" required>
<div class="valid-feedback">有效。</div>
<div class="invalid-feedback">请填写此字段。</div>
</div>
<div class="form-group">
<label for="pwd">密码：</label>
<input type="password" class="form-control" id="pwd" placeholder="输入密码" name="pswd" required>
<div class="valid-feedback">有效。</div>
<div class="invalid-feedback">请填写此字段。</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required> 我同意 blabla。
<div class="valid-feedback">有效。</div>
<div class="invalid-feedback">勾选此复选框以继续。</div>
</label>
</div>
<button type="submit" class="btn btn-primary">提交</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>
自己尝试 »
