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 創建一個默認表單布局。

實例

<form class="well">
    <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)。下麵是一個實例:

實例

<form class="well form-search">
    <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)。下麵是一個實例:

實例

<form class="well form-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)。下麵是一個實例:

實例

<form class="form-horizontal">
    <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"。

下麵是一個實例,展示了獲得焦點的輸入框、隻讀的輸入框、禁用的輸入框、禁用的複選框和禁用的按鈕的樣式如何改變。

實例

<form class="form-horizontal">
    <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 可以為驗證表單時的錯誤、警告、成功狀態定義樣式。這是很好的特性,由於當用戶提交表單數據發生錯誤時,或者需要生成一個警告時,甚至是通知用戶已經成功提交數據時,需要向用戶展示不同的樣式。

這裏有一個實例:

實例

<form class="form-horizontal">
    <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>

在線查看

在不同的瀏覽器窗口查看上麵實例。

點擊這裏,下載本教程中使用到的所有 HTML、CSS、JS 和圖片文件。