基础表单
表单创建：
- 父元素添加role=“form”
- 把标签和控件放在class="form-group"的div中。
垂直表单： form-control（元素class）
内联表单： form-inline（form标签class）
水平表单： form-horizontal（form标签class） control-label（元素class）
输入框
Bootstrap 提供了对所有原生的HTML5的input 类型的支持
下拉框
使用展示列表选项时，默认情况下只能选择一个选项，如果需要实现多选，可以设置属性multiple=“multiple”
验证样式
表单验证提示：（对父元素添加）
- has-warning：警告状态，显示黄色；
- has-error：错误状态，显示红色；
- has-success：成功状态，显示绿色。
图标提示：
（1）在验证样式的容器上添加class=“has-feedback”。
（2）在标签后面添加一个标签，为标签指定对应的图标样式，并添加class为．form-control-feedback的样式。
（3）把和元素放在一个带有class.input-group 的
中，可以使图标显示在输入框中。
文字提示：在标签后面添加一个标签用于显示提示的文本信息即可实现文字提示。
元素大小
input大小：
- input-sm：让控件比正常大小更小。
- input-lg：让控件比正常大小更大。
label大小：form-group-sm和form-group-lg
输入框组
向．form-control添加前缀或后缀元素的步骤：
（1）把前缀或后缀元素放在一个带有class.input-group的div中。
（2）在相同的div内，在class为．input-group-addon的span内放置额外的内容。
（3）把该span放置在input元素的前面或者后面。
输入框组大小：input-group-lg、input-group-sm
输入框按钮：使用．input-group-btn类来包裹按钮
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h3 class="text-center">Contact</h3>
<p class="text-center"><em>We love our fans!</em></p>
<div class="row test">
<div class="col-md-4">
<p>Fan? Drop a note.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Chicago,US</p>
<p><span class="glyphicon glyphicon-phone"> Phone: +00 1212121212</span></p>
<p><span class="glyphicon glyphicon-envelope"> Email:mail@mail.com</span></p>
</div>
<div class="col-md-8">
<div class="row">
<div class="form-group col-sm-6">
<input type="text" name="name" id="name" value="" class="form-control" placeholder="Name" required="required"/>
</div>
<div class="form-group col-sm-6">
<input type="text" name="email" id="email" value="" class="form-control" placeholder="Email" required="required"/>
</div>
</div>
<textarea rows="5" cols=""class="form-control" id="comments" name="comments" placeholder="Comments">
</textarea>
<div class="row">
<div class="col-md-12 form-group">
<button type="submit" class="btn pull-right">Send</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
来源：CSDN
作者：ZhShy23
链接：https://blog.csdn.net/weixin_43651049/article/details/104027024