完全深入学习Bootstrap表单

前言：由于表单的元素比较多，因此将Bootstrap的表单单独做个总结，表单作为Bootstrap的核心内容，主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

一、基础表单

<form role="form"> <div class="form-group">  <label for="exampleInputEmail1">邮箱：</label>  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址"> </div> <div class="form-group">  <label for="exampleInputPassword1">密码</label>  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码"> </div> <button type="submit" class="btn btn-default">进入邮箱</button></form>

具体解释：

（1）对于form标签的role属性，只是为了增强语义性，并无其他作用；

（2）给div设定.form-group类名，是为了让每个输入框上下间隔一定的距离，不然两个就会挨着；

（3）还有label的for属性和input的id必须同名，是为了标识它俩是一组，且当鼠标点击label标签时，光标会自动锁定到输入框，不用for属性时也可这样写：<label>邮箱：<input type="email" class="form-control" placeholder="请输入您的邮箱地址"> </label>，此时input的长度不是屏幕宽度；

（4）给form添加.form-control类:
1.宽度100%显示；
2.设置了一个浅灰色（#ccc）的边框；
3.具有4px的圆角；
4.设置阴影效果，并且元素得到聚焦时，阴影和边框效果会有所变化；

二、水平表单（标签在左，输入框在右）

<form class="form-horizontal" role="form"> <div class="form-group">  <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>  <div class="col-sm-10">   <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">  </div> </div> <div class="form-group">  <label for="inputPassword3" class="col-sm-2 control-label">密码</label>  <div class="col-sm-10">   <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">  </div> </div> <div class="form-group">  <div class="col-sm-offset-2 col-sm-10">   <button type="submit" class="btn btn-default">进入邮箱</button>  </div> </div></form>

具体解释：

在form标签上使用类.form-horizontal主要有以下作用：
1、设置表单控件padding和margin值；
2、改变“form-group”的表现形式，类似于网格系统的“row”；