WEB前端网页设计-Bootstrap4 表单_bootstrap4中required-CSDN博客

<表单操作=“”> <div class=“form-group”> <label for=“email”>电子邮件地址：</标签> <输入类型=“电子邮件” 类=“表单控件” 占位符=“输入电子邮件”   id=“电子邮件“> </div> <div class=”form-group“> <label for=”pwd“>Password：</标签> <输入类型=“密码” 类=“表单控件” 占位符=“输入密码”   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”>Submit</button> </表单>

显示效果：

内联表单

所有内联表单中的元素都是左对齐的。

注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。

内联表单需要在 <form> 元素上添加 .form-inline类。

以下实例使用两个输入框，一个复选框，一个提交按钮来创建内联表单：

<表单类=“表单内联”> <标签=“电子邮件”>电子邮件地址：</标签> <输入类型=”电子邮件“ class=”form-control“ id=”email“> <label for=”pwd“>Password：</label  > <输入类型=“密码” 类=“表单控件” id=“pwd”  > <div 类=“form-check”> <label class=“form-check-label  ”> <input class=“form-check-input” type=“复选框”>记住我</标签></div><按钮类型=“提交”类=“btn btn-primary”>提交</按钮></表单>

显示效果：

上面的实例元素排列看起来很紧凑，可以使用 .mr-sm-2 类来设置右边距，使用.mb-2 类设置底部边距：

<表单类=“表单内联” 操作=“”> <标签=“电子邮件” 类=“mr-sm-2”  >电子邮件地址：</标签> <输入类型=“电子邮件” 类=“表单控件 MB-2 MR-SM-2” 占位符=“输入电子邮件”   id=“email”> <label for=“pwd” class=“mr-sm-2”>Password：</label> <input 类型=“密码” 类=“表单控件 MB-2 MR-SM-2” 占位符=“输入密码” id=“pwd”   > <  div class=“form-check mb-2 mr-sm-2”> <label class=“form-check-label”>  <input class=“表单检查输入”类型=“复选框”>记住我</标签></div><按钮类型=“submit” class=“btn btn-primary mb-2”>Submit</button> </form>

显示效果：

表单行/网格

我们还可以使用 .col 类来控制表单元素的宽度和对齐方式，不需要使用间距类。.col 类来控制的表单需要放在 .row 容器中。

以下实例将两个列并排显示：

<form> <div class=“row”> <div class=“col”> <input type=“text” class=“form-control” id=“email” 占位符=“输入电子邮件” name=“email”  > </div > <div class=“col”> <input type=“password” class=“form-control”  占位符=“输入密码” 名称=“pswd”> </div> </div>   </表单>

显示效果：

如果网格要使用比较小的间距可以使用 .form-row 替代 .row：

<form> <div class=“form-row”> <div class=“col”> <input type=“text“ class=”form-control“ id=”email“ 占位符=”输入电子邮件“ name=”email“   > </div > <div class=“col”> <input type=“password” class=“form-control”  占位符=“输入密码” 名称=“pswd”> </div> </div>   </表单>

表单验证

我们可以使用不同的验证类来设置表单的验证功能。

.was-validation 或 .needs-validation 添加到 <form> 元素中，input 输入字段将具有绿色（有效）或红色（无效）边框效果，用于说明表单是否需要输入内容。

.valid-feedback 或 .invalid-feedback 类用来告诉用户缺少什么信息，或者在提交表单之前需要完成什么。

## 使用 .was-validate 类显示表单在提交之前需要填写的内容：

<表单操作=“” class=“was-validated”>  <div class=“form-group”> <label for=” uname“>Username：</label> <input type=”text“ class=”form-control“  id=”uname” 占位符=“输入用户名” 名称=“uname” 必需> <div class=“valid-feedback”  >验证成功！</div> <div class=“invalid-feedback”>请输入用户名！</div> </div> <div class=“form-group”> <label for=“pwd”>Password：</label> <input type=“密码” 类=“表单控件” id=“pwd” 占位符=“输入密码”    名称=“pswd“ 必需> <div class=”valid-feedback“>验证成功！</div>  <div  class=“invalid-feedback”>请输入密码！</div> </div> <div <b1201>class=“form-group form-check”> <label class=“form-check-label”>  <input class=”表单检查输入“ 类型=”复选框“ 名称=”记住“   必填> 同意协议 <div class=”valid-feedback“>验证成功！</div> <div class=”invalid-feedback“>同意协议才能提交。</div> </标签> </div> <按钮类型=“提交” 类=“btnbtn-primary“>提交</button> </form>

## 使用 .needs-validation，它将在表单提交之后验证缺少的内容。这里需要添加一些 JavaScript 代码才能使代码正常工作：

<表单操作=“” class=“needs-validation” novalidate> <div class=“form-group”  >  <label for=“uname”>用户名：</label> <input type=“text” class=“form-control”  id=“uname” 占位符=“输入用户名” 名称=“uname” 必需> <  div class=“有效反馈”   > 验证成功！</div> <div class=“invalid-feedback”>请输入用户名！</div> </div> <div class=“form-group”> <label for=“pwd”>Password：</label> <input 类型=“密码” 类=“表单控件” id=“pwd” 占位符=“输入密码”    名称=“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=“表单检查输入” 类型=“复选框” 名称=“记住”   必填> 同意协议 <div class=“valid-feedback”>验证成功！</div> <div class=“invalid-feedback”>同意协议才能提交。</div> </标签> </div> <按钮类型=“提交” 类=“btnbtn-primary“>提交</button> </form> <script> // 如果验证不通过禁止提交表单
（函数（） {
 “使用严格”;
 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'）;
 }， 假）;
 });
 }， 假）;
})();</脚本>