Bootstrap学习之四：表单

@(Bootstrap)[网页] ##导言

关于表单的应用天然不须要多说，只要您的的网站能够用户登陆，那么不可能不用到表单！表单主要功能是用来与用户作交流的一个网页控件，JavaScript发明之初最大的做用也就是用来进行表单操做。因此表单是每个前端开发者必需要熟练掌握的东西。

[toc]

##1.基础表单 表单控件会被自动赋予全局样式，设置了foem-control类的的input,textarea,select元素都被默认设置宽度属性width：100%。 将 label 元素和前面提到的控件包裹在 .form-group 中能够得到最好的排列。

<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>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

<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> <div class="form-group"> <label for="exampleInputFile">File `input`</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>

直接在MarkDown放代码显示，输入框的提示没有显示出来，在html文档中编辑会显示出来

##2.内联表单 为 <form> 元素添加 .form-inline 类可以使其内容左对齐而且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

显示效果以下

3.水平表单

Bootstrap框架默认的表单是 垂直显示风格 ，除了上面的内联表达以外，不少时候咱们须要的是 水平表单风格 。在Bootstrap框架中要实现水平表单效果，必须知足如下两个条件：

在 <form> 元素是使用类名 .form-horizontal ，做用以下： 设置表单控件padding和margin值。 改变“form-group”的表现形式，相似于栅格系统的“row”。 配合Bootstrap框架的栅格系统。 例如：使用 <div class="col-sm-6"></div> 将咱们的input进行包裹

<form class="form-horizontal">
  <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="Email">
    </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="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">
      <button type="submit" class="btn btn-default">登录</button>
    </div>
  </div>
</form>

<form class="form-horizontal"> <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="Email"> </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="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"> <button type="submit" class="btn btn-default">登录</button> </div> </div> </form>

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

<input type="text" class="form-control" placeholder="Text input">

<input type="text" class="form-control" placeholder="Text input"> ##5.文本域 文本域和原始使用方法同样，设置 rows可定义其高度 ，设置 cols能够设置其宽度 。但若是textarea元素中添加了类名 form-control 类名，则无需设置cols属性。由于Bootstrap框架中的 form-control 样式的表单控件宽度为100%或auto。

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

6.多选框和单选框

Bootstrap对于这两个按钮进行了一些优化，要想达到最佳显示效果，有着以下说明：

无论是 checkbox 仍是 radio 都使用 label 包起来了。 checkbox 按钮连同 label 标签放置在一个名为 .checkbox 的容器内， radio 连同 label 标签放置在一个名为 .radio 的容器内。 在Bootstrap框架中，主要借助 .checkbox 和 .radio 样式，来处理复选框、单选按钮与标签的对齐方式。 只须要将 checkbox 换成 checkbox-inline 就能够了，你能够添加在label上也能够添加在外部的容器上。 ##7.静态控件 在水平布局的表单中，若是须要将一行纯文本放置于label的同一行，为< p>元素添加.form-control-static便可。

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

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

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

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

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError">Input with error</label>
  <input type="text" class="form-control" id="inputError">
</div>

<div class="form-group has-success"> <label class="control-label" for="inputSuccess">Input with success</label> <input type="text" class="form-control" id="inputSuccess"> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning">Input with warning</label> <input type="text" class="form-control" id="inputWarning"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError">Input with error</label> <input type="text" class="form-control" id="inputError"> </div> ## 10.高度尺寸 经过.input-lg之类的class能够为控件设置高度，经过.col-lg-*之类的class能够为控件设置宽度。 建立大一些或小一些的表单控件以匹配按钮尺寸。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

<input class="form-control input-lg" type="text" placeholder=".input-lg"> <input class="form-control" type="text" placeholder="Default input"> <input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select> <select class="form-control">...</select> <select class="form-control input-sm">...</select>

参考： Bootstrap官方文档 推酷文章