bootstrap form表单提交_Bootstrap的表单样式内容

Bootstrap提供了一些表单控件样式、布局选项，以及用来创建广泛多样化的的表单的自定义组件。

示例

确保在输入框上使用正确的type属性（如email用于电子邮件地址或number用于数字录入) 从而利用较新的录入控制，包括诸如电子邮件验证、号码选择等。

经典示例：

文本控件（如<input>、<select>、<textarea>）：统一采用.form-control样式进行处理优化，包括常规外观、focus选（点）中状态、尺寸大小等。

文件选择控件：对于input文件选择控件，Bootstrap v4采用.form-control-file取代了.form-control。

只读属性：在input控件上增加readonly（布尔值）标签定义，以防止修改input中的值。仅能阅读的input控件显示较谈（就象禁用的输入框），但保留鼠标效果。

只读纯文本：如果你希望将<input readonly>属性进一步处理，显示为纯文本（没有控件框），你只要引用.form-control-plaintextclass样式，就能移除预设的表单样式，并保留适当的边距和填充间隙。

滑动：使用设置水平滚动范围输入.form-control-range。

<form action="#">
 <div class="form-group">
  <!-- 放表单组，放置一组匹配的表单 -->
  <label for="usename">用户名</label>
  <input type="text" id="usename" class="form-control" placeholder="请输入用户名">
  <small class="form-text text-muted">用户名需要用英文、符号组成</small>
 </div>
 <div class="form-group">
  <label for="password">密码</label>
  <input type="password" class="form-control" id="password" placeholder="请输入密码">
 </div>
 <div class="form-group">
  <label for="passwordAgain">确认密码</label>
  <input type="password" class="form-control" id="passwordAgain" placeholder="请再次输入密码" disabled>
 </div>
 <div class="form-group">
  <label for="area">所在地</label>
  <select name="" id="area" class="form-control">
   <!-- multiple:让下拉框变成多选 -->
   <option value="">北京</option>
   <option value="">上海</option>
   <option value="">广州</option>
   <option value="">深圳</option>
  </select>
 </div>
 <div class="form-group">
  <label for="file">选择文件</label>
  <input type="file" class="form-control-file" id="file">
 </div>
 <div class="form-group">
  <label for="range">滑块</label>
  <input type="range" class="form-control-range" id="range">
 </div>
</form>

复选框与单选框

使用.form-check可以格式化复选框和单选框按钮，用以改进它们的默认布局和动作呈现，复选框用于在列表中选择一个或多个选项，单选框则用于多许多选项中选择一个。

复选框和单选框也是可以禁用的，只要not-allowed在父级的悬停上提供定义，<label>需要将该.disabled类添加到父级.form-check，同时控件也会淡化文字颜色以灰色显示禁用状态。

<form action="#">
 <!-- 复选框、单选框 -->
 <div class="form-group">
  <label for="">兴趣爱好：</label>
  <div class="form-check form-check-inline">
   <!-- 选择框要放在这个类里面， .form-check-inline是为了让表单在一行中显示 -->
   <input type="checkbox" id="eat" class="form-check-input">
   <label for="eat" class="form-check-label">吃饭</label>
  </div>
  <div class="form-check form-check-inline">
   <input type="checkbox" id="sleep" class="form-check-input">
   <label for="sleep" class="form-check-label">睡觉</label>
  </div>
  <div class="form-check form-check-inline">
   <input type="checkbox" id="play" class="form-check-input">
   <label for="play" class="form-check-label">打豆豆</label>
  </div>
 </div>

 <div class="form-group">
  <label for="">性别：</label>
  <div class="form-check form-check-inline">
   <input type="radio" id="male" class="form-check-input" name="sex">
   <label for="male" class="form-check-label">男</label>
  </div>
  <div class="form-check form-check-inline">
   <input type="radio" id="female" class="form-check-input" name="sex">
   <label for="female" class="form-check-label">女</label>
  </div>
 </div>
 <button type="submit" class="btn btn-primary">提交</button>
</form>

表单的尺寸

使用.form-control-lg、.col-form-label-lg和.form-control-sm、.col-form-label-sm属性定控件大小高度。

<div class="row mt-5">
 <div class="col">
  <div class="form-group">
   <input type="text" class="form-control form-control-lg" placeholder="大尺寸的表单">
  </div>
  <div class="form-group">
   <input type="text" class="form-control" placeholder="正常尺寸的表单">
  </div>
  <div class="form-group">
   <input type="text" class="form-control form-control-sm" placeholder="小尺寸的表单">
  </div>

  <div class="form-group">
   <select name="" id="" class="form-control col-form-label-lg">
    <option value="" >大尺寸的下拉框</option>
   </select>
  </div>
  <div class="form-group">
   <select name="" id="" class="form-control">
    <option value="">正常尺寸的下拉框</option>
   </select>
  </div>
  <div class="form-group">
   <select name="" id="" class="form-control col-form-label-sm">
    <option value="">小尺寸的下拉框</option>
   </select>
  </div>
 </div>
</div>

只读属性

在input控件上增加readonly（布尔值）标签定义，以防止修改input中的值。仅能阅读的input控件显示较谈（就象禁用的输入框），但保留鼠标效果。

没有标签

添加.position-static到.form-check选择器上，可以实现没有文本的输入，记住：仍然要为辅助浏览（友好访问）提供相应标签，如使用aria-label定义。

<!-- 只读属性 -->
<div class="row mt-5">
 <div class="col">
  <form action="#">
   <div class="form-group">
    <input type="text" class="form-control" placeholder="只读文本" readonly> 
   </div>
   <div class="form-group">
    <input type="text" class="form-control-plaintext" placeholder="没有边框的只读文本" readonly> 
   </div>
  </form>
 </div>
</div>

表单栅格排列

可使用我们的栅格系统构建更复杂的表单，包括建立多列、多种宽度和其它对齐选项的布局。

<!-- 表单栅格排列 -->
<form action="#"> <!-- form标签一定要放在行与列的外面 -->
 <div class="row">
  <div class="col">
   <input type="text" class="form-control" placeholder="栅格排列">
  </div>
  <div class="col">
   <input type="text" class="form-control" placeholder="栅格排列">
  </div>
 </div>
</form>

表格式排列

你也可以使用.form-row来取代.row（它们二者很多时候可以互换使用），因为.form-row提供更小的沟槽缝隙。

<!-- 表单表格式的排列 -->
<form action="#">
 <div class="form-row"> <!-- 这个class与row的唯一区别就是间距变小了 -->
  <div class="col">
   <input type="text" class="form-control" placeholder="栅格排列">
  </div>
  <div class="col">
   <input type="text" class="form-control" placeholder="栅格排列">
  </div>
 </div>
</form>

栅格系列例子：

<!-- 栅格系列例子 -->
<form action="#">
 <div class="form-row mt-5">
  <div class="col-md-6 form-group">
   <label for="email1">Email</label>
   <input type="email" class="form-control" id="email1" placeholder="请输入邮箱账号">
  </div>
  
  <div class="col-md-6 form-group">
   <label for="password">Password</label>
   <input type="password2" class="form-control" id="password2" placeholder="请输入密码">
  </div>
 </div>

 <div class="row">
  <div class="form-group col">
   <label for="homeAddres">家庭地址</label>
   <input type="text" class="form-control" id="homeAddres" placeholder="请输入家庭地址">
  </div>
 </div>
 <div class="row">
  <div class="form-group col">
   <label for="companyAddres">公司地址</label>
   <input type="text" class="form-control" id="companyAddres" placeholder="请输入公司地址">
  </div>
 </div>

 <div class="form-row">
  <div class="col-md-6 form-group">
   <label for="city">城市</label>
   <input type="text" class="form-control" id="city" placeholder="请输入您所在的城市">
  </div>
  <div class="col-md-4 form-group">
   <label for="marriage">婚姻状况</label>
   <select class="form-control" id="marriage">
    <option value="">已婚</option>
    <option value="">未婚</option>
   </select>
  </div>
  <div class="col-md-2 form-group">
   <label for="education">学历</label>
   <select class="form-control" id="education">
    <option value="">博士</option>
    <option value="">硕士</option>
    <option value="">本科</option>
    <option value="">大专</option>
    <option value="">高中</option>
   </select>
  </div>
 </div>
 <div class="form-group">
  <div class="form-check">
   <input type="checkbox" class="form-check-input" id="grid">
   <label for="grid" class="form-check-lable">同意所读内容</label>
  </div>
 </div>
 <button type="submit" class="btn btn-primary">提交</button>
</form>

水平排列

通过添加.form-check-inline到任何一个组，会使加到任何.form-check中的选取框平行排列。

<!-- 水平排列表单 -->
<form action="#">
 <div class="form-group row mt-5">
  <label for="email2" class="col-sm-2 col-form-label">Email</label> <!-- col-form-lable用来决定下后面的表单进行垂直对齐 -->
  <div class="col-sm-10">
   <input type="email" class="form-control" id="email2" placeholder="请输入email">
  </div>
 </div>
 <div class="form-group row">
  <label for="password3" class="col-sm-2 col-form-label">Password</label> <!-- col-form-lable用来决定下后面的表单进行垂直对齐 -->
  <div class="col-sm-10">
   <input type="password" class="form-control" id="password3" placeholder="请输入密码">
  </div>
 </div>
 <div class="form-group row">
  <label for="" class="col-sm-2">兴趣爱好：</label>
  <div class="col-sm-10">
   <div class="form-check">
    <input type="checkbox" id="eat" class="form-check-input">
    <label for="eat" class="form-check-label">吃饭</label>
   </div>
   <div class="form-check">
    <input type="checkbox" id="sleep" class="form-check-input">
    <label for="sleep" class="form-check-label">睡觉</label>
   </div>
   <div class="form-check">
    <input type="checkbox" id="play" class="form-check-input">
    <label for="play" class="form-check-label">打豆豆</label>
   </div>
  </div>
 </div>
 <div class="form-group row">
  <label for="" class="col-sm-2">性别：</label>
  <div class="col-sm-10">
   <div class="form-check">
    <input type="radio" id="male" class="form-check-input" name="sex">
    <label for="male" class="form-check-label">男</label>
   </div>
   <div class="form-check">
    <input type="radio" id="female" class="form-check-input" name="sex">
    <label for="female" class="form-check-label">女</label>
   </div>
  </div>
 </div>
</form>

内联表单

使用.form-inline样式在单个水平行上显示一系列标签，表单控件和按钮。

<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 <title>Bootstrap的表单样式内容</title>
 <style>
  body {
   padding-bottom: 1000px;
  }
 </style>
</head>

<body>
 <div class="container">
  <!-- 内联表单 -->
  <div class="row mt-5">
   <div class="col">
    <form action="#" class="form-inline">
     <div class="form-group mr-5">
      <label for="">用户名：</label>
      <input type="email" class="form-control" value="kaivon@qq.com">
     </div>
     <div class="form-group mr-5">
      <label for="">密码：</label>
      <input type="password" class="form-control">
     </div>
     <div class="form-group mr-5">
      <input type="checkbox" class="form-control-input">
      <label for="" class="form-control-label">记住我</label>
     </div>
     <div class="form-group mr-5">
      <button type="submit" class="btn btn-primary">提交</button>
     </div>
    </form>
   </div>
  </div>

 </div>
</body>

</html>

表单验证

Bootstrap中验证机制如下：

HTML表单验证通过CSS的两个伪类应用::invalid以及:valid。它适用于 <input>、 <select>、 <textarea>元素。
Bootstrap ::invalid 和 :valid 樣式在 .was-validated ，通常会反馈到<form>，否则必填的内容在加载的过程中会显示无效，这个方法你呆以选择在任何时候启用它（通过是在尝试提交表单后）。
作为备用，.is-invalid 和 .is-valid类别可以用来代替伪类用于服务器端验证。他们不需要.server side validation定义在父层上。
由于CSS的工作原理限制，我们无法（现在）将样式应用于DOM中的表单控制组件之前的<label>上，而不需要使用自用自定义JavaScript。
所有现代浏览器都支持约束验证API，这是一系列用于验证表单控件的JavaScript方法。
反馈消息可能会使用浏览器默认值（每个浏览器不同，通过私有CSS样式）或其他HTML和CSS的自定义反馈样式。
你可以在JavaScript中使用setCustomValidity 提供有效自定义消息。

对于自定义Bootstrap表单验证消息，您需要将novalidate属性添加到您的<form>。

:invalid和:valid的样式应用于表单控件。

<form action="#" class="needs-validation" novalidate>
 <div class="form-row">
  <div class="col-md-4 form-group">
   <label for="surname">姓</label>
   <input type="text" class="form-control" id="surname" placeholder="请输入姓" value="陈" required>
   <div class="valid-feedback"> <!-- 验证成功对应的class -->
    验证通过！
   </div>
   <div class="invalid-feedback"> <!-- 验证失败对应的class -->
    验证失败！
   </div>
  </div>
  
  <div class="col-md-4 form-group">
   <label for="name">名</label>
   <input type="text" class="form-control" id="name" placeholder="请输入名" value="学辉" required>
   <div class="valid-feedback"> <!-- 验证成功对应的class -->
    验证通过！
   </div>
  </div>
  
  <div class="col-md-4 form-group">
   <label for="usename">用户名</label>
   <input type="text" class="form-control" id="usename" placeholder="请输入用户名" required>
   <div class="invalid-feedback">请输入正确的用户名！</div>
  </div>
 </div>

 <div class="form-row">
  <div class="col-md-6 form-group">
   <label for="homeAddress">家庭地址</label>
   <input type="text" class="form-control" id="homeAddress" placeholder="请输入家庭地址" required>
   <div class="invalid-feedback">请输入正确的家庭地址！</div>
  </div>
  <div class="col-md-6 form-group">
   <label for="companyAddress">公司地址</label>
   <input type="text" class="form-control" id="companyAddress" placeholder="请输入公司地址" required>
   <div class="invalid-feedback">请输入正确的公司地址！</div>
  </div>
 </div>

 <div class="form-group">
  <div class="form-check">
   <input type="checkbox" class="form-check-input" id="grid" required>
   <label for="grid" class="form-check-label">同意所读内容</label>
   <div class="invalid-feedback">你必需同意此内容后才能继续操作！</div>
  </div>
 </div>
 <button type="submit" class="btn btn-primary">提交</button>
</form>

<script>
 (function(){
  var forms=document.querySelectorAll('.needs-validation');

  forms.forEach(function(form,index){
   form.addEventListener('submit',function(ev){
    //console.log(1);
    if(form.checkValidity()===false){ //如果表单验证成功，那这个方法会返回true
     ev.preventDefault();
     ev.stopPropagation();
    }

    form.classList.add('was-validated'); //提交事件发生后，不管验证是否成功，都需要给form身上添加这个class
   });
  });
 })();
</script>

自定义表单

为了使自定义表单和跨浏览器保持一致性，请使用自定义的表单元素来替换浏览器的默认值，它们建立在语义和具备友了的标记之上，因此它们是可以替代任何默认表单控制元件的。

<!-- 自定义表单 -->
<div class="row mt-5">
 <div class="col">
  <div class="form-group custom-control custom-checkbox">
   <input type="checkbox" id="eat" class="custom-control-input">
   <label for="eat" class="custom-control-label">吃饭</label>
  </div>
  <div class="form-group custom-control custom-radio">
   <input type="radio" id="male" class="custom-control-input" name="sex">
   <label for="male" class="custom-control-label">男</label>
  </div>
  <div class="form-group custom-control custom-radio">
   <input type="radio" id="female" class="custom-control-input" name="sex">
   <label for="female" class="custom-control-label">女</label>
  </div>
  
  <!-- 在一行中排列，.custom-control-inline -->
  <div class="form-group custom-control custom-radio custom-control-inline">
   <input type="radio" id="male1" class="custom-control-input" name="sex1">
   <label for="male1" class="custom-control-label">男</label>
  </div>
  <div class="form-group custom-control custom-radio custom-control-inline">
   <input type="radio" id="female1" class="custom-control-input" name="sex1" disabled> <!-- 禁用表单 -->
   <label for="female1" class="custom-control-label">女</label>
  </div>

  <!-- 下拉菜单 -->
  <select name="" id="" class="form-group custom-select">
   <option value="">城市</option>
   <option value="">北京</option>
   <option value="">上海</option>
   <option value="">广州</option>
  </select>

  <!-- 滑块 -->
  <div class="form-group">
   <label for="range1">滑块</label>
   <input type="range" class="custom-range" id="range1">
  </div>
  <div class="form-group">
   <label for="range2">有范围的滑块</label>
   <input type="range" class="custom-range" min="0" max="5" id="range2">
  </div>
  <div class="form-group">
   <label for="range3">规定步长的滑块</label>
   <input type="range" class="custom-range" min="0" max="5" step="0.5" id="range3">
  </div>

  <!-- 文件选择 -->
  <div class="form-group custom-file">
   <input type="file" class="custom-file-input" id="file">
   <label for="file" class="custom-file-label">Choose fild</label>
  </div>
 </div>
</div>