表單常見的元素主要包括：文本輸入框、下拉選擇框、單選框、復(fù)選框、文本域、按鈕等。下面是不同的bootstrap版本：
LESS: forms.less
SASS: _forms.scss
bootstrap僅對(duì)表單內(nèi)的fieldset、legend、label標(biāo)簽進(jìn)行了定制
fieldset {min-width: 0;padding: 0;margin: 0;border: 0;}legend {display: block;width: 100%;padding: 0;margin-bottom: 20px;font-size: 21px;line-height: inherit;color: #333;border: 0;border-bottom: 1px solid #e5e5e5;}label {display: inline-block;margin-bottom: 5px;font-weight: bold;}除了這個(gè)幾個(gè)元素之外，還有input、select、textarea等元素，在bootstrap框架中，通過定制一個(gè)類名.form-control來實(shí)現(xiàn)效果
1、寬度變成了100%；
2、設(shè)置了一個(gè)淺灰色（#ccc）的邊框
3、具有4px的圓角
4、設(shè)置陰影效果，并且元素得到焦點(diǎn)時(shí)，陰影和邊框效果會(huì)有所變化
5、設(shè)置了palceholder的顏色為#999
內(nèi)聯(lián)表單
如果要在input之前添加一個(gè)了label標(biāo)簽，會(huì)導(dǎo)致input換行顯示；如果又必須添加這樣一個(gè)label標(biāo)簽，且不想讓input換行，就需要將label標(biāo)簽也放在容器.form-group中，例如：
<div class="form-group "><label class="sr-only">郵箱地址</label></div><div class="form-group"><input type="email" class="form-control" placeholder="請(qǐng)輸入郵箱號(hào)"></div>
效果如下：
實(shí)現(xiàn)聯(lián)表單效果只需在form元素中添加類名.form-inline即可，實(shí)現(xiàn)原理：
將表單控件設(shè)置成內(nèi)聯(lián)塊元素（display：inline-block），讓表單控件在一行顯示。
例子：
<form class="form-inline"><div class="form-group"><label class="sr-only">郵箱</label><input class="form-control" type="email" placeholder="請(qǐng)輸入郵箱號(hào)"></div><div class="form-group"><label class="sr-only">密碼</label><input type="password" class="form-control" placeholder="請(qǐng)輸入密碼"></div><div class="checkbox"><label><input type="checkbox" > 記住密碼</label></div><div class="form-group"><button class="btn btn-default">進(jìn)入郵箱</button></div></form>
效果如下：
看到上圖效果你有沒有發(fā)現(xiàn)代碼里明明有l(wèi)abel標(biāo)簽，且沒放在容器.form-group中，input也不會(huì)換行，更奇怪的是label標(biāo)簽的內(nèi)容居然沒有顯示出來！其實(shí)仔細(xì)一看label標(biāo)簽是添加了類名.sr-only，就是它將label給隱藏起來了，來看看它的源碼：
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}既然添加了label標(biāo)簽，又添加.sr-only類名把label給隱藏起來，是不是多此一舉？？？但這恰恰是bootstrap框架的一個(gè)優(yōu)點(diǎn)，如果沒有為輸入控件設(shè)置label，屏幕閱讀器將無法正確識(shí)別，同時(shí)也為殘障人員進(jìn)行了一定的考慮
水平表單
在bootstrap中實(shí)現(xiàn)水平表單效果需滿足下面兩個(gè)條件：
1、在form元素上使用類名.form-horizontal
2、配合bootstrap框架的網(wǎng)格系統(tǒng)（詳細(xì)：詳解Bootstrap網(wǎng)格系統(tǒng)）
在form元素使用類名.form-horizontal主要有以下幾個(gè)作用：
1、設(shè)置表單控件padding和margin值
2、改變.from-group的表現(xiàn)形式，類似于網(wǎng)格系統(tǒng)的row
css源碼：
.form-horizontal .control-label,.form-horizontal .radio,.form-horizontal .checkbox,.form-horizontal .radio-inline,.form-horizontal .checkbox-inline {padding-top: 7px;margin-top: 0;margin-bottom: 0;}.form-horizontal .radio,.form-horizontal .checkbox {min-height: 27px;}.form-horizontal .form-group {margin-right: -15px;margin-left: -15px;}.form-horizontal .form-control-static {padding-top: 7px;}@media (min-width: 768px) {.form-horizontal .control-label {text-align: right;}}.form-horizontal .has-feedback .form-control-feedback {top: 0;right: 15px;}例子:
<form class="form-horizontal"><div class="form-group"><label class="col-sm-2 control-label">郵箱</label><div class="col-sm-10"><input type="email" class="form-control" placeholder="請(qǐng)輸入郵箱"></div></div><div class="form-group"><label class="col-sm-2 control-label">密碼</label><div class="col-sm-10"><input type="password" class="form-control" placeholder="請(qǐng)輸入密碼"></div></div><div class="form-group"><div class="col-sm-10 col-sm-offset-2"><label><input type="checkbox">記住密碼</label></div></div><div class="form-group"><div class="col-sm-10 col-sm-offset-2"><button class="btn btn-default">進(jìn)入郵箱</button></div></div></form>
效果如下：
單行輸入框
在bootstrap中使用input時(shí)也必須添加type類型，如果沒有指定type類型，將無法得到正確的樣式，因?yàn)閎ootstrap框架都是通過input[type=”?”]的形式來定義樣式的，如：text類型，對(duì)應(yīng)得是input[type=”text”]
為了讓控件在各種表單風(fēng)格中樣式不錯(cuò)，需要添加類名.form-control
<form role="form"><div class="form-group"><input type="email" class="form-control" placeholder="enter email" ></div></form>
下拉選擇框select
多行選擇設(shè)置multiple屬性的值為multiple
<form role="form"><div class="form-group"><select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div><div class="form-group"><select multiple class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div></form>
文本域textarea
文本域和原始使用方法一樣，設(shè)置rows可定義其高度，設(shè)置cols可以定義其寬度，如果textarea元素中添加了類名.form-control,則無需設(shè)置cols屬性，因?yàn)閎ootstrap框架中.form-control樣式的標(biāo)的空間寬度為100%或auto
<form role="form"><div class="form-group"><textarea class="form-control" rows="3"></textarea></div></form>
復(fù)選框checkbox和單選框radio
checkbox和radio與label標(biāo)簽配合使用會(huì)出現(xiàn)一些小問題（如對(duì)齊問題）
<form><div class="checkbox"><label><input type="checkbox"> 記住密碼</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" checked> 喜歡</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios2">不喜歡</label></div></form>
1、不管是checkbox還是radio都使用label包起來了
2、checkbox連同label標(biāo)簽放在一個(gè)名為.checkbox的容器內(nèi)
3、radio連同label標(biāo)簽放在一個(gè)名為.radio的容器內(nèi),bootstrap主要借助.checkbox和.radio樣式來處理復(fù)選框、單選按鈕與標(biāo)簽的對(duì)齊方式
.radio,.checkbox {display: block;min-height: 20px;padding-left: 20px;margin-top: 10px;margin-bottom: 10px;}.radio label,.checkbox label {display: inline;font-weight: normal;cursor: pointer;}.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"] {float: left;margin-left: -20px;}.radio + .radio,.checkbox + .checkbox {margin-top: -5px;}復(fù)選框和單選按鈕水平排列
1、如果checkbox需要水平排列，只需要在label標(biāo)簽上添加類名.checkbox-inline
2、如果radio需要水平排列，只需在label標(biāo)簽上添加類名.radion-inline
下面是css源碼：
.radio-inline,.checkbox-inline {display: inline-block;padding-left: 20px;margin-bottom: 0;font-weight: normal;vertical-align: middle;cursor: pointer;}.radio-inline + .radio-inline,.checkbox-inline + .checkbox-inline {margin-top: 0;margin-left: 10px;} <div class="form-group"><label class="radio-inline"><input type="radio" name="sex"value="option1"> 男性</label><label class="radio-inline"><input type="radio" name="sex" value="option2"> 女性</label><label class="radio-inline"><input type="radio" name="sex" value="option3">中性</label></div>
表單控件狀態(tài)
1、焦點(diǎn)狀態(tài)：
焦點(diǎn)狀態(tài)是通過偽類：focus來實(shí)現(xiàn)的，bootstrap表單控件中的焦點(diǎn)狀態(tài)刪除了outline的默認(rèn)樣式，重新添加陰影效果，下面是
css源碼：
.form-control:focus {border-color: #66afe9;outline: 0;-webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}從源碼中可以看出，要讓控件在焦點(diǎn)狀態(tài)下有上面的樣式效果需要給控件添加類名.form-control
<form class="form-horizontal"><div class="form-group "><div class="col-xs-6"><input type="text" class=" input-lg" placeholder="不是在焦點(diǎn)狀態(tài)下的效果"></div><div class="col-xs-6"><input type="text" class="form-control input-lg" placeholder="在焦點(diǎn)狀態(tài)下的效果"></div></div></form>
file、radio、checkbox控件在焦點(diǎn)狀態(tài)下的效果也與普通的input控件不太一樣，下面是源碼
input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}2、禁用狀態(tài)：
在相應(yīng)得表單控件上添加屬性disabled即可，下面是css源碼：
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {cursor: not-allowed;background-color: #eee;opacity: 1;} input[type="radio"][disabled],input[type="checkbox"][disabled],.radio[disabled],.radio-inline[disabled],.checkbox[disabled],.checkbox-inline[disabled],fieldset[disabled] input[type="radio"],fieldset[disabled] input[type="checkbox"],fieldset[disabled] .radio,fieldset[disabled] .radio-inline,fieldset[disabled] .checkbox,fieldset[disabled] .checkbox-inline {cursor: not-allowed;}例子：
<input type="text" class="form-control" placeholder="表單已禁用" disabled>
如果fieldset設(shè)置了disabled屬性，整個(gè)域都會(huì)處于被禁用狀態(tài)
例子：
<form role="form"><fieldset disabled><div class="form-group"><label> 輸入框已禁用</label><input type="text" class="form-control" placeholder="禁止輸入內(nèi)容"></div><div class="form-group"><label>下拉框已禁用</label><select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option></select></div><div class="checkbox"><label ><input type="checkbox">選項(xiàng)框被禁用了</label></div><button type="submit" class="btn btn-primary">提交</button></fieldset></form>
效果如下：（鼠標(biāo)移上去的時(shí)候出現(xiàn)禁用的圖標(biāo)，這里是直接截的圖看不到這個(gè)效果）
3、驗(yàn)證狀態(tài)
bootstrap提供下面這幾種效果：
1、.has-warning:警告狀態(tài) 黃色
2、 .has-error :錯(cuò)誤狀態(tài) 紅色
3、 .has-success:成功狀態(tài) 綠色
使用的時(shí)候只需在form-group容器上對(duì)應(yīng)添加狀態(tài)類名，三種狀態(tài)下效果都是一樣的，只是顏色不一樣而已
例子：
<form><div class="form-group has-success"><label>成功狀態(tài)</label><input type="text" class="form-control" placeholder="成功狀態(tài)"></div><div class="form-group has-error"><label>錯(cuò)誤狀態(tài)</label><input type="text" class="form-control" placeholder="錯(cuò)誤狀態(tài)"></div><div class="form-group has-warning"><label>警告狀態(tài)</label><input type="text" class="form-control" placeholder="警告狀態(tài)"></div></form>
效果如下：
有時(shí)候，在表單驗(yàn)證的時(shí)不同的狀態(tài)會(huì)提供不同的icon，如果要在對(duì)應(yīng)的狀態(tài)下顯示icon出來，只需要在對(duì)應(yīng)的狀態(tài)下添加類名.has-feedback ,注意它要和.has-error,.has-success,.has-warning一起使用。
bootstrap的小圖標(biāo)都是使用@font-face來制作的。如：
<span class=”glyphicon glyphicon-warning form-control-feedback”></span>
例子：
<form><div class="form-group has-success has-feedback"><label> 成功狀態(tài)</label><input type="text" class="form-control" placeholder="成功狀態(tài)"><span class="glyphicon glyphicon-ok form-control-feedback"></span></div><div class="form-group has-error has-feedback"><label>錯(cuò)誤狀態(tài)</label><input type="text" class="form-control" placeholder="錯(cuò)誤狀態(tài)"><span class="glyphicon glyphicon-remove form-control-feedback"></span></div><div class="form-group has-warning has-feedback"><label>警告狀態(tài)</label><input type="text" class="form-control" placeholder="警告狀態(tài)"><span class="glyphicon glyphicon-warning-sign form-control-feedback"></span></div></form>
效果如下：
表單提示信息
一般在制作表單驗(yàn)證時(shí)，需要提供不同的提示信息，在bootstrap框架中使用.help-block，將提示信息以塊狀顯示，并且顯示在控件底部
下面是css源碼：
.help-block {display: block;margin-top: 5px;margin-bottom: 10px;color: #737373;}例子：
<form><div class="form-group has-success has-feedback"><label>成功狀態(tài)</label><input type="text" class="form-control" placeholder="成功狀態(tài)"><span class="help-block">輸入的信息正確</span><span class="glyphicon glyphicon-ok form-control-feedback"></span></div><div class="form-group has-error has-feedback"><label>錯(cuò)誤狀態(tài)</label><input type="text" class="form-control" placeholder="錯(cuò)誤狀態(tài)"><span class="help-block">輸入的信息有誤</span><span class="glyphicon glyphicon-remove form-control-feedback"></span></div><div class="form-group has-warning has-feedback"><label>警告狀態(tài)</label><input type="text" class="form-control" placeholder="警告狀態(tài)"><span class="help-block">請(qǐng)輸入正確的信息</span><span class="glyphicon glyphicon-warning-sign form-control-feedback"></span></div></form>
效果如下：
如果不想為bootstrap.css增加自己的代碼，而且設(shè)計(jì)又有這種需要，可以借助bootstrap的網(wǎng)格系統(tǒng),例如：
<form role="form"><div class="form-group"><label class="control-label" for="inputSuccess1">成功狀態(tài)</label><div class="row"><div class="col-xs-6"><input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" ></div><span class="col-xs-6 help-block">你輸入的信息是正確的</span></div></div> </form>
以上所述是小編給大家介紹的Bootstrap表單組件的相關(guān)內(nèi)容，希望對(duì)大家有所幫助！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
