Bootstrap 全局CSS样式：表单类的使用

作者:WangMin
格言:努力做好自己喜欢的每一件事

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%;。将label元素包裹到.form-group中可以更好地展示表单。

<form>
    <div class="form-group">
        <label for="username">username</label>
        <input type="text" class="form-control" id="username" placeholder="username"/>
        <span class="help-block">字母下划线3-8位</span>
    </div>
    <div class="form-group">
        <label for="password">password</label>
        <input type="password" class="form-control" id="password" placeholder="password"/>
        <span class="help-block">密码为6-8位</span>
    </div>
    <div class="form-group">
        <div class="checkbox">
        <label><input type="checkbox">七天免密登陆</label>
    </div>
    <div class="form-group">
        <input type="button" name="" id="login" value="登录" class="btn btn-success" />
        <input type="button" name="" id="loginout" value="取消" class="btn btn-danger" />
    </div>
</form>

注意：不要将 表单组 直接和 输入框 组混合使用。建议将 输入框组 嵌套到 表单组 中使用。

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 标签添加类.form-inline。只在屏幕视口（viewport）至少在 768px 宽度时（屏幕视口宽度再小的话就会使表单折叠）。
实例 1：

<form class="form-inline" >
    <div class="form-group">
        <label for="username">username</label>
        <input type="text" class="form-control" id="username" placeholder="username"/>
    </div>
    <div class="form-group">
        <label for="password">password</label>
        <input type="password" class="form-control" id="password" placeholder="password"/>
    </div>
    <div class="form-group">
        <input type="button" name="" id="login" value="登录" class="btn btn-success" />
    </div>
</form>

注意 :

  1. 可能需要手动设置宽度。在 Bootstrap 中，输入框和单选/多选框控件默认被设置为`width: 100%;`宽度。在内联表单，我们将这些元素的宽度设置为`width: auto;`，多个控件就可以排列在同一行。
  2. 一定要添加 label 标签。如果你没有为每个输入控件设置`label`标签，屏幕阅读器将无法正确识别。如果你不想让label显示在页面中，可以通过为`label`设置`.sr-only`类将其隐藏。

实例 2：

<form class="form-inline" >
    <div class="form-group">
        <label class="sr-only" for="username">username</label>
        <input type="text" class="form-control" id="username" placeholder="username"/>
    </div>
    <div class="form-group">
        <label class="sr-only" for="password">password</label>
        <input type="password" class="form-control" id="password" placeholder="password"/>
    </div>
    <div class="checkbox">
         <label ><input type="checkbox" />
Remember me</label>
    </div>
    <div class="form-group">
        <input type="button" name="" id="login" value="登录" class="btn btn-success" />
    </div>
</form>

水平排列的表单

通过为表单添加.form-horizontal类，并联合使用 Bootstrap 预置的栅格类，可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加.row了。

<form class="form-horizontal">
    <div class="form-group">
        <label for="emails" class="col-sm-2 control-label">Emails</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="emails" placeholder="emails"/>
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-2 control-label">password</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="password" placeholder="password"/>
            </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
             <div class="checkbox">
                 <label>
                          <input type="checkbox"> 记住我
                 </label>
             </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <input type="button" name="" id="login" value="登录" class="btn btn-success" />
        </div>
    </div>
</form>

被支持的控件

1. 输入框
输入框包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

注意：必须添加类型声明。只有正确设置了type属性的输入控件才能被赋予正确的样式。

2. 文本域
支持多行文本的表单控件。可根据需要改变rows属性。

<textarea class="form-control" rows="3" placeholder="textarea" ></textarea>

3. 多选和单选框
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。
支持禁用的复选框和单选框，但要在父对象的悬停处提供“不允许”光标，您需要将.Disabled类添加到父级。
(1) . 默认外观（堆叠在一起）

<div class="checkbox">
    <label>
         <input type="checkbox" value=""/>1
     </label>
</div>
<div class="checkbox disabled">
    <label>
        <input type="checkbox" value=""  disabled="disabled"/>2 禁用
    </label>
</div>
<div class="radio">
    <label>
        <input  type="radio" name="optionRadio" id="optionRadio1" value="option1"/>1
    </label>
</div>
<div class="radio">
    <label>
        <input  type="radio" name="optionRadio" id="optionRadio2" value="option2"/>2
    </label>
</div>
<div class="radio disabled">
    <label>
        <input  type="radio" name="optionRadio" id="optionRadio3" value="option3" disabled="disabled"/>3
    </label>
</div>

(2) . 内联单选和多选框

有时候因为布局的需要，将复选框和单选按钮需要水平排列。如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”；如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”。

<label class="checkbox-inline">
     <input type="checkbox" value=""/>1
 </label>
 <label class="checkbox-inline">
      <input type="checkbox" value=""  disabled="disabled"/>2 禁用
</label>
<label class="checkbox-inline">
      <input type="checkbox" value="" />3
</label>

<label class="radio-inline">
      <input  type="radio" name="optionRadio" id="optionRadio1" value="option1"/>1
</label>
<label class="radio-inline">
      <input  type="radio" name="optionRadio" id="optionRadio2" value="option2"/>2
</label>
<label class="radio-inline">
      <input  type="radio" name="optionRadio" id="optionRadio3" value="option3" disabled="disabled"/>3
</label>

(3) . 不带label文本的Checkbox 和 radio
如果在<label>中没有文字，输入框会放到适当的位置。当前只对非行内复选框和单选钮起作用。

<div class="checkbox">
    <label>
        <input type="checkbox" id="blankCheckbox" value="option1">
     </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="blankRadio" id="blankRadio1" value="option1">
    </label>
</div>

(4) .下拉列表（select）
很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改border-radius属性来改变的。
实例 1 ：

<select class="form-control" >
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
</select>

实例 2 ：对于标记了multiple属性的<select>控件来说，默认显示多选项。

<select  multiple class="form-control" >
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
</select>

静态控件

如果需要在表单中将一行纯文本和label元素放置于同一行，为<p>元素添加.form-control-static类即可。

<form class="form-horizontal">
    <div class="form-group">
        <label for="emails" class="col-sm-2 control-label">Emails</label>
        <div class="col-sm-10">
            <p class="form-control-static">email@example.com</p>
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-2 control-label">password</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="password" placeholder="password"/>
            </div>
    </div>
</form>

焦点状态

我们将某些表单控件的默认outline样式移除，然后对:focus状态添加box-shadow属性。

禁用状态

给输入框设置disabled属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了not-allowed鼠标状态。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

（1）被禁用的fieldset
为<fieldset>设置disabled属性,可以禁用<fieldset>中包含的所有控件。但是，如果其中包含有a 标签，它的链接功能不受影响，如果要阻止用户获取到这些链接，建议使用自定义 JavaScript 来禁用这些链接。

<form class="form-horizontal">
 <fieldset disabled>
    <div class="form-group">
        <label for="emails" class="col-sm-2 control-label">Emails</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="emails" placeholder="emails"/>
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-2 control-label">password</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="password" placeholder="password"/>
            </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
             <div class="checkbox">
                 <label>
                          <input type="checkbox"> 记住我
                 </label>
             </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <input type="button" name="" id="login" value="登录" class="btn btn-success" />
        </div>
    </div>
</fieldset>
</form>

只读状态

为输入框设置readonly属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标获取焦点状态。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Help text 辅助文本

将辅助文本与表单控件关联。辅助文本应该使用aria describedby属性显式地与它相关联的表单控件相关联。也就是说，如果需要个某个表单控件添加辅助文本，需要给这个控件添加aria-describedby属性，属性值将是相关联的辅助文本元素所对应的id 属性值。这将确保在用户聚焦或进入控件时宣布此辅助文本。

<label  for="inputHelp">Input with help text</label>
<input type="text" id="inputHelp" class="form-control" aria-describedby="helpBlock">
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

校验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加.has-warning、.has-error或.has-success类到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block元素都将接受这些校验状态的样式。

将验证状态传达给辅助设备和盲人用户。使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示，但是并不能将这种提示信息传达给使用辅助设备的用户 - 例如屏幕阅读器 - 或者色盲用户。

1. 颜色状态显示

<div class="form-group has-success">
        <label  for="inputHelp">Input with success</label>
        <input type="text" id="inputHelp" class="form-control" aria-describedby="helpBlock">
        <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
        <label  for="inputHelp">Input with warning</label>
        <input type="text" id="inputHelp" class="form-control">
</div>
<div class="form-group has-error">
        <label  for="inputHelp">Input with error</label>
        <input type="text" id="inputHelp" class="form-control">
</div>
<div class="has-success">
        <label class="checkbox-inline">
            <input type="checkbox" value=""/>1
        </label>
</div>
<div class="has-warning">
        <label class="checkbox-inline">
            <input type="checkbox" value="" />2 
        </label>
</div>
<div class="has-error">
        <label class="checkbox-inline">
            <input type="checkbox" value="" />3
        </label>
</div>

2. 添加额外的图标状态
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的.has-feedback类并添加正确的图标即可。图标只能使用在文本输入框<input class="form-control">元素上

1. 对于不带有label标签的输入框以及右侧带有附加组件的输入框组，需要手动为其图标定位。但是建议给所有输入框添加label标签，如果你不希望将label标签展示出来，可以通过添加.sr-only类将它隐藏起来。
2. 为了确保可以正确传达一个图标的含义，额外的隐藏的文本应包含在.sr-only类中，并明确关联使用了aria-describedby的表单控件。

<div class="form-group has-success has-feedback">
    <label  for="inputSuccess">Input with success</label>
    <input type="text" id="inputSuccess" class="form-control" aria-describedby="inputSuccess">
    <span  class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group has-warning has-feedback">
    <label  for="inputWarning">Input with warning</label>
    <input type="text" id="inputWarning" class="form-control" aria-describedby="inputWarning">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group has-error has-feedback">
    <label  for="inputError">Input with error</label>
    <input type="text" id="inputError" class="form-control" aria-describedby="inputError">
    <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</div>

控件尺寸

通过.input-lg类似的类可以为控件设置高度，通过.col-lg-*类似的类可以为控件设置宽度。
1. 高度尺寸
创建大一些或小一些的表单控件以匹配按钮尺寸。

<input class="form-control input-lg" type="text" placeholder=".input-lg 最大高度"><br/>
<input class="form-control" type="text" placeholder="Default input 默认高度"><br/>
<input class="form-control input-sm" type="text" placeholder=".input-sm 最小宽度"><br/>
<select class="form-control input-lg"><option>input-lg</option></select><br/>
<select class="form-control"><option>默认高度</option></select><br/>
<select class="form-control input-sm"><option>input-sm</option></select><br/>

2. 水平排列的表单组的尺寸
通过添加.form-group-lg或.form-group-sm类，给.form-horizontal包裹的label元素和表单控件快速设置尺寸。

<form action="" class="form-horizontal">
    <div class="form-group form-group-lg">
        <label for="formGroup" class="col-sm-2 control-label">最大高度</label>
        <div class="col-sm-10">
           <input type="text" class="form-control" id="formGroup" placeholder="最大高度">
        </div>
    </div>
     <div class="form-group form-group-sm">
         <label for="formGroups" class="col-sm-2 control-label">最小高度</label>
         <div class="col-sm-10">
             <input type="text" class="form-control" id="formGroups" placeholder="最小高度">
         </div>
     </div>
 </form>

3. 调整列（column）尺寸
用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

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

就先分享到这里!! :smile: 后续继续更新!!