Bootstarp学习教程（7） 表单
更新日期:
基本案例：“form-control”修饰的<input>、<textarea>和<select>元素都将被默认设置为width: 100%;表单控件包裹在"<code>.form-group"中可以获得最好的排列
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv=”keywords” content=”keyword1,keyword2,keyword3”>
<meta http-equiv=”description” content=”this is my page”>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<!–<link rel=”stylesheet” type=”text/css” href=”./styles.css”>–>
<link rel=”stylesheet” href=”css/bootstrap.min.css”>
<!– 可选的Bootstrap主题文件（一般不用引入） –>
<!–<link rel=”stylesheet” href=”css/bootstrap-theme.min.css”>–>
<!– jQuery文件。务必在bootstrap.min.js 之前引入 –>
<script src=”http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js“></script>
<!– 最新的 Bootstrap 核心 JavaScript 文件 –>
<script src=”js/bootstrap.min.js”></script>
</head>
<body>
<!–容器 –>
<div class=”container”>
<div class=”row”>
<div class=”col-md-4”>
<form class=”form”>
<div class=”form-group”>
<label for=”exampleInputEmail1”>用户名</label> <input
type=”text” 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=”checkbox”>
<label> <input type=”checkbox”> 是否记住用户名和密码 </label>
</div>
<button type=”submit” class=”btn btn-default”>登入</button>
</form>
</div>
</div>
</div>
</body>
</html>
内联表单:"form-inline"可使其内容左对齐并且表现为inline-block级别的控件。**只适用于浏览器窗口至少在 768px 宽度时**** 注意：**需要设置宽度 在Bootstrap中，input、select和textarea默认被设置为100%宽度。为了使用内联表单，你需要专门为使用到的表单控件设置宽度。 一定要设置label 如果你没有为每个输入控件设置label，屏幕阅读器将无法正确识读。对于这些内联表单，你可以通过为label设置<code>.sr-only已将其隐藏。<div class=”row”>
<div class=”col-md-6”>
<form class=”form-inline” role=”form”>
<div class=”form-group”>
<label class=”sr-only” for=”exampleInputEmail2”>邮箱
</label> <input type=”email” class=”form-control”
id=”exampleInputEmail2” placeholder=”在此输入邮箱地址”>
</div>
<div class=”form-group”>
<label class=”sr-only” for=”exampleInputPassword2”>密码</label>
<input type=”password” class=”form-control”
id=”exampleInputPassword2” placeholder=”在此输入密码”>
</div>
<div class=”checkbox”>
<label> <input type=”checkbox”> 是否记住 </label>
</div>
<button type=”submit” class=”btn btn-default”>登入</button>
</form>
</div>
</div>
水平排列的表单:表单添加"<code>form-horizontal"，并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变”form-group"的行为，使其表现为栅格系统中的行（row），因此就无需再使用”row"了。
<form class=”form-horizontal” role=”form”>
<div class=”form-group”>
<label for=”inputEmail3” class=”col-sm-2 control-label”>用户名</label>
<div class=”col-sm-4”>
<input type=”text” class=”form-control” id=”inputEmail3”
placeholder=”在此输入用户名”>
</div>
</div>
<div class=”form-group”>
<label for=”inputPassword3” class=”col-sm-2 control-label”>密码</label>
<div class=”col-sm-4”>
<input type=”password” class=”form-control” id=”inputPassword3”
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>
被支持的控件:在表单布局案例中展示了其所支持的标准表单控件
Input:大部分表单控件、文本输入域控件。包括HTML5支持的所有类型：<code>text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。(只有正确设置了type的input控件才能被赋予正确的样式。)
Textarea:支持多行文本的表单控件。可根据需要改变<code>rows属性。
Checkbox 和 radio:Checkbox用于选择列表中的一个或多个选项，而radio用于从多个选项中只选择一个。
内联checkboxes：通过将“<code>checkbox-inline” 或 “radio-inline”应用到一系列的checkbox或radio控件上，可以使这些控件排列在一行
Select:使用默认选项或添加<code>multiple属性可以显示多个选项。
(4)静态控件:在水平布局的表单中，如果需要将一行纯文本放置于label的同一行，为<code><p>元素添加.form-control-static即可。
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">邮箱</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">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword"
placeholder="Password">
</div>
</div>
</form>
(5)控件状态:通过为控件和label设置一些基本状态，可以为用户提供回馈。
输入焦点:表单控件的默认<code>outline样式，并对其:focus状态赋予了box-shadow样式.
被禁用的输入框:为输入框设置<code>disabled属性可以防止用户输入，并能改变一点外观，使其更直观.
被禁用的fieldset:为<code><fieldset>设置disabled属性可以禁用<fieldset>中包含的所有控件。
<form role=”form”>
<fieldset disabled>
<div class=”form-group”>
<label for=”disabledTextInput”>Disabled input</label> <input
type=”text” id=”disabledTextInput” class=”form-control”
placeholder=”Disabled input”>
</div>
<div class=”form-group”>
<label for=”disabledSelect”>Disabled select menu</label> <select
id=”disabledSelect” class=”form-control”>
<option>Disabled select</option>
</select>
</div>
<div class=”checkbox”>
<label> <input type=”checkbox”> Can’t check this </label>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</fieldset>
</form>
校验状态:Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加<code>.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。