Bootstrap 4 表单
Bootstrap 4 的默认设置
表单控件自动获得 Bootstrap 提供的一些全局样式。
所有带有 .form-control 类的文本 <input>、<textarea> 和 <select> 元素的宽度都为 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> 我同意 bla bla。
<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> 我同意 bla bla。
<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>
自己动手试一试 »
