中。
向標(biāo)簽添加 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
>
嘗試一下 ?
結(jié)果如下所示:
支持的表單控件
Bootstrap 支持最常見的表單控件,主要是 input、textarea、checkbox、radio 和 select。
輸入框(Input)
最常見的表單文本字段是輸入框 input。用戶可以在其中輸入大多數(shù)必要的表單數(shù)據(jù)。Bootstrap 提供了對所有原生的 HTML5 的 input 類型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。適當(dāng)?shù)?type 聲明是必需的,這樣才能讓 input 獲得完整的樣式。
實例
<
form
role
=
"
form
"
>
<
div
class
=
"
form-group
"
>
<
label
for
=
"
name
"
>
標(biāo)簽
label
>
<
input
type
=
"
text
"
class
=
"
form-control
"
placeholder
=
"
文本輸入
"
>
div
>
form
>
嘗試一下 ?
結(jié)果如下所示:
文本框(Textarea)
當(dāng)您需要進(jìn)行多行輸入的時,則可以使用文本框 textarea。必要時可以改變 rows 屬性(較少的行 = 較小的盒子,較多的行 = 較大的盒子)。
實例
<
form
role
=
"
form
"
>
<
div
class
=
"
form-group
"
>
<
label
for
=
"
name
"
>
文本框
label
>
<
textarea
class
=
"
form-control
"
rows
=
"
3
"
>
textarea
>
div
>
form
>
嘗試一下 ?
結(jié)果如下所示:
復(fù)選框(Checkbox)和單選框(Radio)
復(fù)選框和單選按鈕用于讓用戶從一系列預(yù)設(shè)置的選項中進(jìn)行選擇。
- 當(dāng)創(chuàng)建表單時,如果您想讓用戶從列表中選擇若干個選項時,請使用 checkbox。如果您限制用戶只能選擇一個選項,請使用 radio。
- 對一系列復(fù)選框和單選框使用 .checkbox-inline 或 .radio-inline class,控制它們顯示在同一行上。
下面的實例演示了這兩種類型(默認(rèn)和內(nèi)聯(lián)):
實例
<
label
for
=
"
name
"
>
默認(rèn)的復(fù)選框和單選按鈕的實例
label
>
<
div
class
=
"
checkbox
"
>
<
label
>
<
input
type
=
"
checkbox
"
value
=
"
"
>
選項 1
label
>
div
>
<
div
class
=
"
checkbox
"
>
<
label
>
<
input
type
=
"
checkbox
"
value
=
"
"
>
選項 2
label
>
div
>
<
div
class
=
"
radio
"
>
<
label
>
<
input
type
=
"
radio
"
name
=
"
optionsRadios
"
id
=
"
optionsRadios1
"
value
=
"
option1
"
checked
>
選項 1
label
>
div
>
<
div
class
=
"
radio
"
>
<
label
>
<
input
type
=
"
radio
"
name
=
"
optionsRadios
"
id
=
"
optionsRadios2
"
value
=
"
option2
"
>
選項 2 - 選擇它將會取消選擇選項 1
label
>
div
>
<
label
for
=
"
name
"
>
內(nèi)聯(lián)的復(fù)選框和單選按鈕的實例
label
>
<
div
>
<
label
class
=
"
checkbox-inline
"
>
<
input
type
=
"
checkbox
"
id
=
"
inlineCheckbox1
"
value
=
"
option1
"
>
選項 1
label
>
<
label
class
=
"
checkbox-inline
"
>
<
input
type
=
"
checkbox
"
id
=
"
inlineCheckbox2
"
value
=
"
option2
"
>
選項 2
label
>
<
label
class
=
"
checkbox-inline
"
>
<
input
type
=
"
checkbox
"
id
=
"
inlineCheckbox3
"
value
=
"
option3
"
>
選項 3
label
>
<
label
class
=
"
radio-inline
"
>
<
input
type
=
"
radio
"
name
=
"
optionsRadiosinline
"
id
=
"
optionsRadios3
"
value
=
"
option1
"
checked
>
選項 1
label
>
<
label
class
=
"
radio-inline
"
>
<
input
type
=
"
radio
"
name
=
"
optionsRadiosinline
"
id
=
"
optionsRadios4
"
value
=
"
option2
"
>
選項 2
label
>
div
>
嘗試一下 ?
結(jié)果如下所示:
選擇框(Select)
當(dāng)您想讓用戶從多個選項中進(jìn)行選擇,但是默認(rèn)情況下只能選擇一個選項時,則使用選擇框。
- 使用
- 使用 multiple="multiple" 允許用戶選擇多個選項。
下面的實例演示了這兩種類型(select 和 multiple):
實例
<
form
role
=
"
form
"
>
<
div
class
=
"
form-group
"
>
<
label
for
=
"
name
"
>
選擇列表
label
>
<
select
class
=
"
form-control
"
>
<
option
>
1
option
>
<
option
>
2
option
>
<
option
>
3
option
>
<
option
>
4
option
>
<
option
>
5
option
>
select
>
<
label
for
=
"
name
"
>
可多選的選擇列表
label
>
<
select
multiple
class
=
"
form-control
"
>
<
option
>
1
option
>
<
option
>
2
option
>
<
option
>
3
option
>
<
option
>
4
option
>
<
option
>
5
option
>
select
>
div
>
form
>
嘗試一下 ?
結(jié)果如下所示:
靜態(tài)控件
當(dāng)您需要在一個水平表單內(nèi)的表單標(biāo)簽后放置純文本時,請在
上使用 class .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
"
>
密碼
label
>
<
div
class
=
"
col-sm-10
"
>
<
input
type
=
"
password
"
class
=
"
form-control
"
id
=
"
inputPassword
"
placeholder
=
"
請輸入密碼
"
>
div
>
div
>
form
>
嘗試一下 ?
結(jié)果如下所示:
表單控件狀態(tài)
除了 :focus 狀態(tài)(即,用戶點擊 input 或使用 tab 鍵聚焦到 input 上),Bootstrap 還為禁用的輸入框定義了樣式,并提供了表單驗證的 class。
輸入框焦點
當(dāng)輸入框 input 接收到 :focus 時,輸入框的輪廓會被移除,同時應(yīng)用 box-shadow。
禁用的輸入框 input
如果您想要禁用一個輸入框 input,只需要簡單地添加 disabled 屬性,這不僅會禁用輸入框,還會改變輸入框的樣式以及當(dāng)鼠標(biāo)的指針懸停在元素上時鼠標(biāo)指針的樣式。
禁用的字段集 fieldset
對