前言：由于表单的元素比较多，因此将Bootstrap的表单单独做个总结，表单作为Bootstrap的核心内容，主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。
一、基础表单
<form role="form"> <div> <label for="exampleInputEmail1">邮箱：</label> <input type="email" placeholder="请输入您的邮箱地址"> </div> <div> <label for="exampleInputPassword1">密码</label> <input type="password" placeholder="请输入您的邮箱密码"> </div> <button type="submit">进入邮箱</button> </form>
具体解释：
（1）对于form标签的role属性，只是为了增强语义性，并无其他作用；
（2）给div设定.form-group类名，是为了让每个输入框上下间隔一定的距离，不然两个就会挨着；
（3）还有label的for属性和input的id必须同名，是为了标识它俩是一组，且当鼠标点击label标签时，光标会自动锁定到输入框，不用for属性时也可这样写：<label>邮箱：<input type="email" placeholder="请输入您的邮箱地址"> </label>，此时input的长度不是屏幕宽度；
（4）给form添加.form-control类:
1.宽度100%显示；
2.设置了一个浅灰色（#ccc）的边框；
3.具有4px的圆角；
4.设置阴影效果，并且元素得到聚焦时，阴影和边框效果会有所变化；
二、水平表单（标签在左，输入框在右）
<form role="form"> <div> <label for="inputEmail3">邮箱</label> <div> <input type="email" placeholder="请输入您的邮箱地址"> </div> </div> <div> <label for="inputPassword3">密码</label> <div> <input type="password" placeholder="请输入您的邮箱密码"> </div> </div> <div> <div> <button type="submit">进入邮箱</button> </div> </div> </form>
具体解释：
在form标签上使用类.form-horizontal主要有以下作用：
1、设置表单控件padding和margin值；
2、改变“form-group”的表现形式，类似于网格系统的“row”；
在使用时必须和网格系统配合使用，才能实现水平方向的效果，对于不同宽度的设备显示不同的布局，使用时可以调节浏览器的大小看不同的效果，当浏览器大小小于某个值就会呈垂直显示。
三、内联表单（表单控件都在一行显示）
<form role="form"> <div> <label for="exampleInputEmail2">邮箱</label> <input type="email" placeholder="请输入你的邮箱地址"> </div> <div> <label for="exampleInputPassword2">密码</label> <input type="password" placeholder="请输入你的邮箱密码"> </div> <button type="submit">进入邮箱</button> </form>
具体解释：
有时我们会用到在网页顶部的导航栏输入用户名和密码，这时就需要在一行显示，此时给form标签添加.form-inline类就可轻而易举的实现；同时当改变显示设备大小时就会自动发生换行，呈普通表单的样式。
四、表单的基本元素
1、input元素：加上类.form-control就可以实现最基本的输入框样式
（1）基本输入框
<input type="text">
（2）比基本大的输入框
<input type="text">
（3）比基本小的输入框
<input type="text">
2、 textarea元素：加上类.form-control可以不用设置cols属性值，此时标签宽度为100%
<textarea rows="5">
3.、select元素：与原始一致，作为下拉选择框，可以实现多行选择和单行选择，加上.form-control类只是为了同一风格
<select><option>222</option></select>
4.、复选框checkbox和单选按钮radio：
（1）给checkbox和radio专门写了.checkbox和.radio这两个类，是为了解决对齐问题，下面的代码是垂直显示
`<form role="form"> <div> <label> <input type="checkbox" value=""> 踢足球 </label> </div> <div> <label> <input type="checkbox" value=""> 打篮球 </label> </div> <div> <label> <input type="radio" value="love" checked> 喜欢 </label> </div> <div> <label> <input type="radio" value="hate"> 不喜欢 </label> </div> </form> `
（2）复选框和单选框水平显示，此时不需要.checkbox和.radio类，但是要配合.form-group类同时使用，给label标签加上.check-inline或.radio-inline类即可