Bootstrap 的 Form (Part 2)

Bootstrap 的 Form (Part 1)   Bootstrap 的 Form (Part 2)  Bootstrap 的 Form (Part 3)
Bootstrap 的 Form (Part 4)

接下來我們一同來看Bootstrap在form中所支援的控制項有那些. 首先我們使用Bootstrap 的 Form (Part 1)一文中所準備的有Bootstrap垂直式佈局form的主版頁面新增一個網頁

請注意許多HTML5的控制項在IE10是無法運作的, 請參見http://www.moke.tw/wordpress/computer/web/314

INPUTS控制項  

Bootstrap支援HTML5 的input types, 可把type設為text, password, datetime, date, datetime-local, email, number 或其他. 需在input中加入class="form-control"以套用Bootstrap的styling.

     <div class="form-group">
        <label for="txtAccount">帳號: </label>
         <input  type="text" id="txtAccount" class="form-control" placeholder="請輸入您的帳號"/>
    </div>
    <div class="form-group">
        <label for="txtPWD">密碼: </label>
         <input  type="password" id="txtPWD" class="form-control"/>
    </div>
    <div class="form-group">
        <label for="txtBirth">出生年月日: </label>
         <input  type="date" id="txtBirth" class="form-control"/>
    </div>
    <div class="form-group">
        <label for="txtLunch">午飯時間: </label>
         <input  type="datetime-local" id="txtLunch" class="form-control"/>
    </div>
    <div class="form-group">
        <label for="txtAmount">數量1: </label>
         <input  type="number" id="txtAmount" class="form-control"/>
    </div>

在Google Chrome中測試畫面如下:

TEXTAREA控制項 

如果內容比較多, 可以改用textarea放置多行的文字內容, 在上例中加入下列內容

    <div class="form-group">
        <label for="txtNotes">註: </label>
         <textarea id="txtNotes" class="form-control" rows="5"></textarea>

    </div>

在Google Chrome中測試畫面如下: