bootstrap form表单

Bootstrap 表单 ： 

1.垂直表单

2.内联表单

3.水平表单

1.1 垂直表单 ： 

for : 与id的名称一致，属性规定label与那个字段绑定，并且当鼠标选中的时候有文本框变色效果 ； 

form-group : 取得最佳间距 ； 

父级form表单中添加向父role = “form”

向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control"

	<!-- form表单 -->
	<div class="container">
		<div class="row">
			<!-- 垂直或基本表单 -->
			<div class="col-md-3">
				<form role="form" action="" method="post">
					<div class="form-group">
						<label for="name">名   称</label> <input id="name"
							type="text" class="form-control" placeholder="请输入名称" />
					</div>
					<div class="form-group">
						<label for="inputfile">请选择文档</label> <input id="inputfile"
							type="file" />
						<p class="help-block">块级模块</p>
					</div>
					<div class="form-group">
						<label> 
							<input type="checkbox">请打勾
						</label>
					</div>
					<button type="submit" class="btn btn-default">提交</button>
				</form>
			</div>
			<div class="col-md-3"></div>
			<div class="col-md-3"></div>
			<div class="col-md-3"></div>
		</div>

	</div>

2.内联表单 ： 父级表单 上添加class="form-inline"

sr-only : 隐藏内联表单的标签

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
  <div class="form-group">
    <label class="sr-only" for="inputfile">文件输入</label>
    <input type="file" id="inputfile">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">请打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

3. 水平表单

向父 <form> 元素添加 class .form-horizontal

把标签和控件放在一个带有 class .form-group 的 <div> 中。

向标签添加 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>
  <div class="form-group">
    <label for="lastname" class="col-sm-2 control-label">姓</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="lastname" placeholder="请输入姓">
    </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>

常见表单控件：  Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select

复选框（Checkbox）和单选框（Radio）

当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。

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

选择框（Select）

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

使用 <select> 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。

使用 multiple="multiple" 允许用户选择多个选项。

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

表单控件状态

除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。

输入框焦点

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

禁用的输入框 input

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

禁用的字段集 fieldset

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

验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。