Bootstrap 表單
簡介
在本教學中，您將學習如何使用 Bootstrap 2.0 工具包來創建表單。
Bootstrap 已經為 input、textarea 和 select 等表單控件定義樣式，支持列表和複選框，為禁用的表單控件定義樣式，包括每個表單控件的錯誤、警告、成功狀態。
自版本 2.0 起，Bootstrap 提供了四中類型的表單佈局 -
- 垂直（默認）
- 搜索
- 內聯
- 水準
在 Bootstrap 的上一個版本中，表單佈局默認是水準佈局。但是，自版本 2.0 起，垂直佈局是默認佈局。
創建垂直表單佈局
為 bootstrap.css 中 .form-vertical class 的 Bootstrap 默認表單佈局（即垂直表單）定義樣式。但是由於這是默認表單佈局，在通過默認佈局創建表單的時候，不需要規定 .form-vertical class。下麵的實例演示一個通過 Bootstrap 2.0 默認表單佈局創建的表單。
.well class 用於創建表單的容器（當然，它還有其他用途）。這個 class 可在 bootstrap.css 中行號 1650 到 1663 找到。對於這個佈局，輸入框是塊級的（block level）。下麵的實例演示如何使用 Bootstrap 創建一個默認表單佈局。
實例
<label>標籤名稱</label>
<input type="text" class="span3" placeholder="Type something…">
<span class="help-inline">相關幫助文檔 ！</span>
<label class="checkbox">
<input type="checkbox"> 選中我
</label>
<button type="submit" class="btn">提交</button>
</form>
線上查看
創建搜索表單佈局
使用位於 bootstrap.css 中行號為 962 到 1003 （這些行也包含了 .form-inline 的樣式）的 .form-search class，來創建一個搜索表單。對於這個佈局，輸入框是塊級的（block level）。下麵是一個實例：
實例
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">搜索</button>
</form>
線上查看
創建內聯表單佈局
使用位於 bootstrap.css 中行號為 962 到 1003 （這些行也包含了 .form-search 的樣式）的 .form-inline class，來創建一個內聯表單。對於這個佈局，輸入框是內聯的（inline）。下麵是一個實例：
實例
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> 記住我
</label>
<button type="submit" class="btn">登錄</button>
</form>
線上查看
創建水準表單佈局
使用位於 bootstrap.css 中的 .form-horizontal class，來創建一個水準表單。對於這個佈局，輸入框是塊級的（block level）。下麵是一個實例：
實例
<fieldset>
<legend>Bootstrap 支持的控件</legend>
<div class="control-group">
<label class="control-label" for="input01">文本輸入</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">除了自由格式文本，一些HTML5基於文本的輸入像這樣呈現。</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckbox">確認框</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="optionsCheckbox" value="option1">
選中選項，確認此項正確。
</label>
</div>
</div>
<div class="control-group">
<label class="control-label" for="select01">選擇列表</label>
<div class="controls">
<select id="select01">
<option>something</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="multiSelect">多選</label>
<div class="controls">
<select multiple="multiple" id="multiSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="fileInput">檔上傳</label>
<div class="controls">
<input class="input-file" id="fileInput" type="file">
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">文本區域</label>
<div class="controls">
<textarea class="input-xlarge" id="textarea" rows="3"></textarea>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">保存修改</button>
<button class="btn">取消</button>
</div>
</fieldset>
</form>
線上查看
Bootstrap 表單控件的流覽器狀態
當輸入字段獲得焦點或者輸入字段被禁用或者字段只讀時，Bootstrap 已經為這些定義樣式。在 bootstrap.css 中從行號 677 到 697，為獲得焦點的輸入框和輸入域元素定義了樣式。
首先，Webkit "outline" 作為 ":focus" 的值使用，但是現在已經變為 " box-shadow"。
下麵是一個實例，展示了獲得焦點的輸入框、只讀的輸入框、禁用的輸入框、禁用的複選框和禁用的按鈕的樣式如何改變。
實例
<fieldset>
<legend>Bootstrap支持的控件</legend>
<div class="control-group">
<label class="control-label" for="input01">焦點輸入</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">除了自由格式文本，一些HTML5基於文本的輸入像這樣呈現。</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">只讀輸入</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01" readonly="true">
<p class="help-block">除了自由格式文本，一些HTML5基於文本的輸入像這樣呈現。</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">禁用輸入</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01" disabled>
<p class="help-block">除了自由格式文本，一些HTML5基於文本的輸入像這樣呈現。</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckbox" reado>確認框 (禁用)</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="optionsCheckbox" value="option1" disabled>
選中選項，確認此項正確。
</label>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" disabled>保存修改 (禁用按鈕)</button>
<button class="btn">取消</button>
</div>
</fieldset>
</form>
線上查看
為表單驗證定義樣式
Bootstrap 2.0 可以為驗證表單時的錯誤、警告、成功狀態定義樣式。這是很好的特性，由於當用戶提交表單數據發生錯誤時，或者需要生成一個警告時，甚至是通知用戶已經成功提交數據時，需要向用戶展示不同的樣式。
這裏有一個實例：
實例
<fieldset>
<legend>表單驗證錯誤，警告或成功</legend>
<div class="control-group error">
<label class="control-label" for="inputError">輸入錯誤</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">請糾正錯誤</span>
</div>
</div>
<div class="control-group warning">
<label class="control-label" for="inputWarning">輸入警告</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">出現一些錯誤</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">成功輸入</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">成功輸入</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="selectError">選擇成功</label>
<div class="controls">
<select id="selectError">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<span class="help-inline">選擇成功</span>
</div>
</div>
</fieldset>
</form>