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>

邮箱：

密码：

File `input`

Example block-level help text here.

Check me out

Submit **直接在MarkDown放代码显示，输入框的提示没有显示出来，在html文档中编辑会显示出来** ##2.内联表单 为 元素添加 .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-horizontal ，作用如下： 设置表单控件padding和margin值。 改变“form-group”的表现形式，类似于栅格系统的“row”。 配合Bootstrap框架的栅格系统。 例如：使用 `

` 将我们的`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>

邮箱

我是密码

##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">

##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的同一行，为

元素添加.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>

Input with success

Input with warning

Input with error

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>

…
…
…

---

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