知識(shí)點(diǎn)
基本表單
<input>、<textarea>汇荐、<select>設(shè)置.form-control類掏击，這些元素將會(huì)被設(shè)置為 width:100%;height:34px;携冤；
添加<label>與前面這些控件悼粮，一起包裹在.form-group中。
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
基本表單
內(nèi)聯(lián)表單
為 <form> 元素添加 .form-inline 類可使其內(nèi)容左對(duì)齊并且表現(xiàn)為 inline-block 級(jí)別的控件曾棕。只適用于視口（viewport）至少在 768px 寬度時(shí)（視口寬度再小的話就會(huì)使表單折疊）扣猫。
內(nèi)聯(lián)表單中的<input>、<textarea>睁蕾、<select>這些控件的寬度被設(shè)為width:auto;苞笨，這個(gè)我們?cè)趯戫撁鏁r(shí)需要去自定義設(shè)置。
<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>
內(nèi)聯(lián)表單
一定要添加 label 標(biāo)簽
如果你沒有為每個(gè)輸入控件設(shè)置 label 標(biāo)簽子眶，屏幕閱讀器將無法正確識(shí)別。對(duì)于這些內(nèi)聯(lián)表單序芦，你可以通過為 label 設(shè)置 .sr-only 類將其隱藏臭杰。還有一些輔助技術(shù)提供label標(biāo)簽的替代方案，比如 aria-label谚中、aria-labelledby 或 title 屬性渴杆。如果這些都不存在，屏幕閱讀器可能會(huì)采取使用 placeholder 屬性宪塔，如果存在的話磁奖，使用占位符來替代其他的標(biāo)記，但要注意某筐，這種方法是不妥當(dāng)?shù)摹?/p>
.sr-only
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
input-group-addon與btn-primary
水平排列的表單
通過為表單添加 .form-horizontal 類比搭，并聯(lián)合使用 Bootstrap 預(yù)置的柵格類，可以將 label 標(biāo)簽和控件組水平并排布局南誊。這樣做將改變 .form-group 的行為身诺，使其表現(xiàn)為柵格系統(tǒng)中的行（row），因此就無需再額外添加 .row 了抄囚。
<label>需要添加.control-label類來調(diào)整行高位置霉赡，與input等控件相對(duì)應(yīng)顯示；
<form class="form-horizontal">
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
</form>
水平排列的表單
靜態(tài)控件
如果需要在表單中將一行純文本和 label 元素放置于同一行幔托，為 <p> 元素添加 .form-control-static 類即可穴亏。具體實(shí)例參照下面的實(shí)踐。
焦點(diǎn)狀態(tài)
focus
.form-control 元素的 :focus 狀態(tài)
校驗(yàn)狀態(tài)
Bootstrap 對(duì)表單控件的校驗(yàn)狀態(tài)，使用時(shí)嗓化，添加 .has-warning锅劝、.has-error 或 .has-success 類到這些控件的父元素即可。任何包含在此元素之內(nèi)的 .control-label蟆湖、.form-control 和 .help-block 元素都將接受這些校驗(yàn)狀態(tài)的樣式故爵；
還可以針對(duì)校驗(yàn)狀態(tài)為輸入框添加額外的圖標(biāo)；只需設(shè)置相應(yīng)的 .has-feedback 類并添加正確的圖標(biāo)隅津；
反饋圖標(biāo)（feedback icon）只能使用在文本輸入框 <input class="form-control"> 元素上诬垂。
實(shí)例：TODO：校驗(yàn)狀態(tài)
控件尺寸
添加 .form-group-lg 或 .form-group-sm 類，為 .form-horizontal 包裹的 label 元素和表單控件快速設(shè)置尺伦仍；
用柵格系統(tǒng)中的列（column）包裹輸入框或其任何父元素结窘，都可很容易的為其設(shè)置寬度。
實(shí)踐
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表單</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.line{border-top:1px solid #afd9ee;margin:20px 0;}
-->
</style>
</head>
<body>
<div class="container">
<!--基本表單格式-->
<p>基本表單</p>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</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>
<div class="line"></div>
<!--內(nèi)聯(lián)表單 width:auto; 一定要有l(wèi)abel元素充蓝，label元素添加sr-only類隧枫，則該元素會(huì)被隱藏-->
<p>內(nèi)聯(lián)表單</p>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2" class="sr-only">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe" value="它之前的label元素被隱藏了">
</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>
<br/>
<form class="form-inline">
<div class="form-group">
<lable>價(jià)格：</lable>
<div class="input-group">
<div class="input-group-addon">input-group-addon</div>
<input type="text" class="form-control" placeholder="" value=""/>
<div class="input-group-addon">.00</div>
<div class="input-group-btn">input-group-btn</div>
</div>
</div>
</form>
<div class="line"></div>
<!--水平排列的表單-->
<p>水平排列的表單</p>
<form class="form-horizontal">
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2 control-label">name</label>
<div class="col-xs-10"><input type="text" value="" name="" placeholder="" class="form-control"/></div>
</div>
</div>
<div class="clearfix"></div>
</form>
<div class="line"></div>
<!--textarea-->
<p>textarea</p>
<textarea class="form-control" rows="5"></textarea>
<div class="line"></div>
<!--單選與復(fù)選-->
<p>單選與復(fù)選</p>
<div class="checkbox">
<label>
<input type="checkbox" value="" name="checkbox"/>
復(fù)選框按鈕
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" name="checkbox" disabled/>
復(fù)選框按鈕，不可選disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio"/>單選框
</label>
<label>
<input type="radio" name="radio"/>單選框
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="radio" disabled/>單選框不可選
</label>
</div>
<div class="line"></div>
<!--下拉列表（select）-->
<p>下拉列表（select）</p>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="line"></div>
<!--靜態(tài)控件-->
<p>靜態(tài)控件</p>
<form class="form-horizontal"><!--單行顯示-->
<div class="form-group">
<label class="col-sm-2 control-label">Email</label><!--sr-only-->
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p><!--添加 form-control-static 類來設(shè)置p元素與label同行顯示-->
</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>
<form class="form-inline"><!--一行顯示-->
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">email@example.com</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>
<div class="line"></div>
<!--校驗(yàn)狀態(tài)-->
<p>校驗(yàn)狀態(tài)</p>
<form class="form-horizontal">
<div class="form-group has-success">
<label class="col-xs-2 control-label">has-success</label>
<div class="col-xs-10"><input type="text" value="" name="" class="form-control"/></div>
</div>
<div class="form-group has-warning">
<label class="col-xs-2 control-label">has-warning</label>
<div class="col-xs-10"><input type="text" value="" name="" class="form-control"/></div>
</div>
<div class="form-group has-error">
<label class="col-xs-2 control-label">has-error</label>
<div class="col-xs-10"><input type="text" value="" name="" class="form-control"/></div>
</div>
</form>
<div class="line"></div>
<!--控件尺寸-->
<p>控件尺寸</p>
<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">
</div>
</body>
</html>
