簡(jiǎn)體中文(ZH-CN) English(EN) 繁體中文(ZH-TW) 日本語(yǔ)(JA) ???(KO) Melayu(MS) Fran?ais(FR) Deutsch(DE)

目錄搜索

Bootstrap 基礎(chǔ)教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類 Bootstrap 排版 Bootstrap 圖片 Bootstrap 網(wǎng)格系統(tǒng) Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備 Bootstrap 響應(yīng)式實(shí)用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標(biāo)簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對(duì)象（Media Object） Bootstrap 分頁(yè) Bootstrap 徽章（Badges） Bootstrap 進(jìn)度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁(yè)面標(biāo)題（Page Header） Bootstrap 字體圖標(biāo)(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標(biāo)簽頁(yè)（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動(dòng)監(jiān)聽（Scrollspy） Bootstrap 過(guò)渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 輪播（Carousel） Bootstrap 模態(tài)框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜單（Dropdown） Bootstrap 折疊（Collapse） Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器

?
本文檔使用 PHP中文網(wǎng)手冊(cè) 發(fā)布

文字

Bootstrap 表單

在本章中，我們將學(xué)習(xí)如何使用 Bootstrap 創(chuàng)建表單。Bootstrap 通過(guò)一些簡(jiǎn)單的 HTML 標(biāo)簽和擴(kuò)展的類即可創(chuàng)建出不同樣式的表單。

表單布局

Bootstrap 提供了下列類型的表單布局：

垂直表單（默認(rèn)）
內(nèi)聯(lián)表單
水平表單

垂直或基本表單

基本的表單結(jié)構(gòu)是 Bootstrap 自帶的，個(gè)別的表單控件自動(dòng)接收一些全局樣式。下面列出了創(chuàng)建基本表單的步驟：

向父 <form> 元素添加 role="form"。
把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 基本表單</title>
   <link rel="stylesheet" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <div class="form-group">
      <label for="name">名稱</label>
      <input type="text" class="form-control" id="name" 
         placeholder="請(qǐng)輸入名稱">
   </div>
   <div class="form-group">
      <label for="inputfile">文件輸入</label>
      <input type="file" id="inputfile">
      <p class="help-block">這里是塊級(jí)幫助文本的實(shí)例。</p>
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> 請(qǐng)打勾
      </label>
   </div>
   <button type="submit" class="btn btn-default">提交</button>
</form>

</body>
</html>

結(jié)果如下所示：

內(nèi)聯(lián)表單

如果需要?jiǎng)?chuàng)建一個(gè)表單，它的所有元素是內(nèi)聯(lián)的，向左對(duì)齊的，標(biāo)簽是并排的，請(qǐng)向 <form> 標(biāo)簽添加 class .form-inline。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 內(nèi)聯(lián)表單</title>
   <link rel="stylesheet" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<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="請(qǐng)輸入名稱">
   </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"> 請(qǐng)打勾
      </label>
   </div>
   <button type="submit" class="btn btn-default">提交</button>
</form>

</body>
</html>

結(jié)果如下所示：

默認(rèn)情況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內(nèi)聯(lián)表單時(shí)，您需要在表單控件上設(shè)置一個(gè)寬度。
使用 class .sr-only，您可以隱藏內(nèi)聯(lián)表單的標(biāo)簽。

水平表單

水平表單與其他表單不僅標(biāo)記的數(shù)量上不同，而且表單的呈現(xiàn)形式也不同。如需創(chuàng)建一個(gè)水平布局的表單，請(qǐng)按下面的幾個(gè)步驟進(jìn)行：

向父 <form> 元素添加 class .form-horizontal。
把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。
向標(biāo)簽添加 class .control-label。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 水平表單</title>
   <link rel="stylesheet" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<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="請(qǐng)輸入名字">
      </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="請(qǐng)輸入姓">
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <div class="checkbox">
            <label>
               <input type="checkbox"> 請(qǐng)記住我
            </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>

</body>
</html>

結(jié)果如下所示：

支持的表單控件

Bootstrap 支持最常見的表單控件，主要是 input、textarea、checkbox、radio 和 select。

輸入框（Input）

最常見的表單文本字段是輸入框 input。用戶可以在其中輸入大多數(shù)必要的表單數(shù)據(jù)。Bootstrap 提供了對(duì)所有原生的 HTML5 的 input 類型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。適當(dāng)?shù)?type 聲明是必需的，這樣才能讓 input 獲得完整的樣式。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 輸入框</title>
   <link rel="stylesheet" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
  <div class="form-group">
    <label for="name">標(biāo)簽</label>
    <input type="text" class="form-control" placeholder="文本輸入">
  </div>
 </form>

</body>
</html>

結(jié)果如下所示：

文本框（Textarea）

當(dāng)您需要進(jìn)行多行輸入的時(shí)，則可以使用文本框 textarea。必要時(shí)可以改變 rows 屬性（較少的行 = 較小的盒子，較多的行 = 較大的盒子）。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 文本框</title>
   <link rel="stylesheet" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

</body>
</html>

結(jié)果如下所示：

復(fù)選框（（Checkbox）和單選框（Radio）

復(fù)選框和單選按鈕用于讓用戶從一系列預(yù)設(shè)置的選項(xiàng)中進(jìn)行選擇。

當(dāng)創(chuàng)建表單時(shí)，如果您想讓用戶從列表中選擇若干個(gè)選項(xiàng)時(shí)，請(qǐng)使用 checkbox。如果您限制用戶只能選擇一個(gè)選項(xiàng)，請(qǐng)使用 radio。
對(duì)一系列復(fù)選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。

下面的實(shí)例演示了這兩種類型（默認(rèn)和內(nèi)聯(lián)）：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 復(fù)選框和單選按鈕</title>
   <link rel="stylesheet" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<label for="name">默認(rèn)的復(fù)選框和單選按鈕的實(shí)例</label>
<div class="checkbox">
   <label><input type="checkbox" value="">選項(xiàng) 1</label>
</div>
<div class="checkbox">
   <label><input type="checkbox" value="">選項(xiàng) 2</label>
</div>

<div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" 
         value="option1" checked> 選項(xiàng) 1
   </label>
</div>
<div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" 
         value="option2">
         選項(xiàng) 2 - 選擇它將會(huì)取消選擇選項(xiàng) 1
   </label>
</div>
<label for="name">內(nèi)聯(lián)的復(fù)選框和單選按鈕的實(shí)例</label>
<div>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox1" value="option1"> 選項(xiàng) 1
   </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox2" value="option2"> 選項(xiàng) 2
   </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox3" value="option3"> 選項(xiàng) 3
   </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
         value="option1" checked> 選項(xiàng) 1
   </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios4" 
         value="option2"> 選項(xiàng) 2
   </label>
</div>

</body>
</html>

結(jié)果如下所示：

選擇框（Select）

當(dāng)您想讓用戶從多個(gè)選項(xiàng)中進(jìn)行選擇，但是默認(rèn)情況下只能選擇一個(gè)選項(xiàng)時(shí)，則使用選擇框。

使用 <select> 展示列表選項(xiàng)，通常是那些用戶很熟悉的選擇列表，比如州或者數(shù)字。
使用 multiple="multiple" 允許用戶選擇多個(gè)選項(xiàng)。

下面的實(shí)例演示了這兩種類型（select 和 multiple）：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 選擇框</title>
   <link rel="stylesheet" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<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>

</body>
</html>

結(jié)果如下所示：

靜態(tài)控件

當(dāng)您需要在一個(gè)水平表單內(nèi)的表單標(biāo)簽后放置純文本時(shí)，請(qǐng)?jiān)?<p> 上使用 class .form-control-static。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 靜態(tài)控件</title>
   <link rel="stylesheet" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<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="請(qǐng)輸入密碼">
    </div>
  </div>
</form>

</body>
</html>

結(jié)果如下所示：

表單控件狀態(tài)

除了 :focus 狀態(tài)（即，用戶點(diǎn)擊 input 或使用 tab 鍵聚焦到 input 上），Bootstrap 還為禁用的輸入框定義了樣式，并提供了表單驗(yàn)證的 class。

輸入框焦點(diǎn)

當(dāng)輸入框 input 接收到 :focus 時(shí)，輸入框的輪廓會(huì)被移除，同時(shí)應(yīng)用 box-shadow。

禁用的輸入框 input

如果您想要禁用一個(gè)輸入框 input，只需要簡(jiǎn)單地添加 disabled 屬性，這不僅會(huì)禁用輸入框，還會(huì)改變輸入框的樣式以及當(dāng)鼠標(biāo)的指針懸停在元素上時(shí)鼠標(biāo)指針的樣式。

禁用的字段集 fieldset

對(duì) <fieldset> 添加 disabled 屬性來(lái)禁用 <fieldset> 內(nèi)的所有控件。

驗(yàn)證狀態(tài)

Bootstrap 包含了錯(cuò)誤、警告和成功消息的驗(yàn)證樣式。只需要對(duì)父元素簡(jiǎn)單地添加適當(dāng)?shù)?class（.has-warning、 .has-error 或 .has-success）即可使用驗(yàn)證狀態(tài)。

下面的實(shí)例演示了所有控件狀態(tài)：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 表單控件狀態(tài)</title>
   <link rel="stylesheet" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label class="col-sm-2 control-label">聚焦</label>
      <div class="col-sm-10">
         <input class="form-control" id="focusedInput" type="text" 
            value="該輸入框獲得焦點(diǎn)...">
      </div>
   </div>
   <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">
         禁用
      </label>
      <div class="col-sm-10">
         <input class="form-control" id="disabledInput" type="text" 
            placeholder="該輸入框禁止輸入..." disabled>
      </div>
   </div>
   <fieldset disabled>
      <div class="form-group">
         <label for="disabledTextInput"  class="col-sm-2 control-label">
            禁用輸入（Fieldset disabled）
         </label>
         <div class="col-sm-10">
            <input type="text" id="disabledTextInput" class="form-control" 
               placeholder="禁止輸入">
         </div>
      </div>
      <div class="form-group">
         <label for="disabledSelect"  class="col-sm-2 control-label">
            禁用選擇菜單（Fieldset disabled）
         </label>
         <div class="col-sm-10">
            <select id="disabledSelect" class="form-control">
               <option>禁止選擇</option>
            </select>
         </div>
      </div>
   </fieldset>
   <div class="form-group has-success">
      <label class="col-sm-2 control-label" for="inputSuccess">
         輸入成功
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputSuccess">
      </div>
   </div>
   <div class="form-group has-warning">
      <label class="col-sm-2 control-label" for="inputWarning">
         輸入警告
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputWarning">
      </div>
   </div>
   <div class="form-group has-error">
      <label class="col-sm-2 control-label" for="inputError">
         輸入錯(cuò)誤
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputError">
      </div>
   </div>
</form>

</body>
</html>

結(jié)果如下所示：

表單控件大小

您可以分別使用 class .input-lg 和 .col-lg-* 來(lái)設(shè)置表單的高度和寬度。下面的實(shí)例演示了這點(diǎn)：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 表單控件大小</title>
   <link rel="stylesheet" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <div class="form-group">
      <input class="form-control input-lg" type="text" 
         placeholder=".input-lg">
   </div>

   <div class="form-group">
      <input class="form-control" type="text" placeholder="默認(rèn)輸入">
   </div>

   <div class="form-group">
      <input class="form-control input-sm" type="text" 
         placeholder=".input-sm">
   </div>
   <div class="form-group">
   </div>
   <div class="form-group">
      <select class="form-control input-lg">
         <option value="">.input-lg</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control">
         <option value="">默認(rèn)選擇</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control input-sm">
         <option value="">.input-sm</option>
      </select>
   </div>

   <div class="row">
      <div class="col-lg-2">
         <input type="text" class="form-control" placeholder=".col-lg-2">
      </div>
      <div class="col-lg-3">
         <input type="text" class="form-control" placeholder=".col-lg-3">
      </div>
      <div class="col-lg-4">
         <input type="text" class="form-control" placeholder=".col-lg-4">
      </div>
   </div>
</form>

</body>
</html>

結(jié)果如下所示：

表單幫助文本

Bootstrap 表單控件可以在輸入框 input 上有一個(gè)塊級(jí)幫助文本。為了添加一個(gè)占用整個(gè)寬度的內(nèi)容塊，請(qǐng)?jiān)?<input> 后使用 .help-block。下面的實(shí)例演示了這點(diǎn)：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 表單幫助文本</title>
   <link rel="stylesheet" >
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
   <span>幫助文本實(shí)例</span>
   <input class="form-control" type="text" placeholder="">
   <span class="help-block">一個(gè)較長(zhǎng)的幫助文本塊，超過(guò)一行，
   需要擴(kuò)展到下一行。本實(shí)例中的幫助文本總共有兩行。</span>
</form>

</body>
</html>

結(jié)果如下所示：

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Bootstrap 表單

表單布局

垂直或基本表單

內(nèi)聯(lián)表單

水平表單

支持的表單控件

輸入框（Input）

文本框（Textarea）

復(fù)選框（（Checkbox）和單選框（Radio）

選擇框（Select）

靜態(tài)控件

表單控件狀態(tài)

輸入框焦點(diǎn)

禁用的輸入框 input

禁用的字段集 fieldset

驗(yàn)證狀態(tài)

表單控件大小

表單幫助文本