Bootstrap表单

1.表单的布局

垂直表单（默认），内联表单，水平表单

2.创建基本表单的步骤

向父<form>元素添加role="form"
把**标签和控件**放在一个带有class.form-group的<div>中。这是获取最佳间距所必需的
向所有的**文本元素**<input> <textarea>和<select>添加class.form-control

<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>

3.内联表单

如果创建一个表单，他的所有元素都是内联的，向左对齐的，标签是并排的，请向<form>标签添加class.form-inline

默认情况下，input，select和 textarea有100%的宽度，在使用内联表单时，需要在表单的控件上设置一个宽度。

使用class .sr-only可以隐藏内联表单的标签

4.水平表单

创建一个水平表单的步骤

1.向父<form>元素添加class .form-horizontal
2.把标签和控件放在一个带有class .form-group的<div>中
3.向标签添加class .control-label

<form class="form-horizontal" role="form">//水平表单
<div class="form-group"> //标签和控件放在这个类中
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="请输入名字">
</div>
</div>
</form>

5.支持表单的控件

常见的表单控件，主要是input , textarea, checkbox, radio, select

输入框input

最常见的表单文本字段输入框input,

<form role="form">
<div class="form-group">
<label for="name">标签</label>
<input type="text" class="form-control" placeholder="文本输入">
</div>
</form>

文本框 Textarea

当需要多行的输入时，可以使用文本框textarea。必要时可以改变rows属性（较少的行=较小的盒子，较多的行=较大的盒子）

<form role="form">
<div class="form-group">
<label for="name">文本框</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</form>

复选框Checkbox和单选框Radio

对一系列的复选框和单选框使用.checkbox-inline或.radio-inline class，控制他们显示在同一行上

<div class="checkbox">
<label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">选项 2</label>
</div>

<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1"
value="option1" checked> 选项 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2"
value="option2">
选项 2 - 选择它将会取消选择选项 1
</label>
</div>

选择框select

想让用户从多个选项中选择，但是在默认情况下只能选择一个选项时，则使用选择框

使用select展示列表选项

使用multipule=”multiple”允许用户选择多个选项

<form role="form">
<div class="form-group">
<label for="name">选择列表</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<label for="name">可多选的选择列表</label>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>

静态控件

当需要在一个水平表单内的表单标签后放置纯文本时，请在<p>上使用class .form-control-static

<p class="form-control-static">email@example.com</p>

表单控件状态

输入框焦点：

当输入框input接收到：focus时，输入框的轮廓会被移除，同时应用box-shadow

禁用的输入框input

想要禁用一个输入框input，只需简单的添加disabled属性，这不仅会禁用输入框，还会改变输入框的样式及当鼠标的指针悬停在元素上鼠标指针的样式

禁用的字段集fieldset

对<fieldset>添加属性disabled属性来禁用<fieldset>内的所有控件

验证状态

当包含错误，警告和成功消息的验证样式。对父元素添加适当的class（.has-warning,.has-error,.has-success）即可验证状态

<div class="form-group">
<label class="col-sm-2 control-label">聚焦</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text"
value="该输入框获得焦点...">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">
禁用
</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text"
placeholder="该输入框禁止输入..." disabled>
</div>
</div>

<div class="form-group has-success">
<label class="col-sm-2 control-label" for="inputSuccess">
输入成功
</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
</div>
</div>

表单控件的大小

使用class .input-lg和.col-lg设置表单的高度和宽度

<div class="form-group">
<select class="form-control">
<option value="">默认选择</option>
</select>
</div>
<div class="form-group">
<select class="form-control input-sm">
<option value="">.input-sm</option>
</select>
</div>

<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>

表单帮助文本

表单控件可以在输入框input上有一个块级帮助文本。为了添加一个占用整个宽度的内容框，在input后使用.help-block

<form role="form">
<span>帮助文本实例</span>
<input class="form-control" type="text" placeholder="">
<span class="help-block">一个较长的帮助文本块，超过一行，
需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
</form>