Bootstrap 表单
-
定义和使用
表单控件会通过 Bootstrap 自动接收一些全局样式:类 .form-control 的所有文本<input> ,<textarea> 和 <select> 元素的宽度均为100%。下面的示例创建具有两个输入字段,一个复选框和一个提交按钮的堆叠表单。在每个窗体控件周围添加一个带有 .form-group 的 wrapper 元素,以确保适当的边距:
尝试一下<div class ="container"> <form action=""> <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> </div>
输出结果如下: -
内联表单
以内联形式,所有元素都是内联且左对齐。注意:这仅适用于视口内至少576px宽的表单;在小于576px的屏幕上,它将水平堆叠。内联表单的附加规则:将类 .form-inline 添加到 <form> 元素。下面的示例创建一个内联表单,其中包含两个输入字段,一个复选框和一个提交按钮:
尝试一下<div class ="container"> <form class="form-inline"> <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> </div>
输出结果如下:上面的内联形式感觉“已压缩”,使用 Bootstrap 的间距实用程序会看起来更好。下面的示例在所有设备(小型和大型)上的每个输入上添加一个右边界 .mr-sm-2。 当输入字段中断时(由于没有足够的空间/宽度,从水平到垂直),使用空白边距类 .mb-2 设置样式:
尝试一下<div class ="container"> <form class="form-inline"> <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> </div>
输出结果如下: -
表单网格布局
您也可以使用列 .col 来控制表单输入的宽度和对齐方式,而无需使用间距实用程序。 只要记住将它们放在 .row 容器中即可。
尝试一下<form> <div class="row"> <div class="col"> <input type="email" class="form-control" 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="email" class="form-control" placeholder="请输入邮箱" name="email"> </div> <div class="col"> <input type="password" class="form-control" placeholder="请输入密码" name="pswd"> </div> </div> </form>
-
表单校验
您可以使用不同的验证类向用户提供有价值的反馈。将 .was-validated 或 .needs-validation 添加到 <form> 元素,具体取决于您要在提交表单之前还是之后提供验证反馈;输入字段将具有绿色(有效)或红色(无效)边框,以指示表单中缺少的内容;您还可以添加 .valid-feedback 或 .invalid-feedback 消息,以明确告知用户缺少的内容或提交表单之前需要完成的操作。下面示例中,我们使用 .was-validated 来指示提交表单之前缺少的内容:
尝试一下<form 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> 我同意 <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 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> 我同意 <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>
-