jquery Mobile 入門3 （表單）

                                                    jquery  Mobile   入門3

三. 表單

1. 輸入框

文本輸入框是標準的Html元素，JQuery Mobile爲它添加了一些樣式，在視覺上更具吸引力。通過placeholder屬性指定一個簡短的描述，用來描述輸入字段的期望值。

1. <div class="ui-field-contain">
2. <label for="fullname">全名:</label>
3. <input type="text" name="fullname" id="fullname">
4. <label for="bday">生日:</label>
5. <input type="date" name="bday" id="bday">
6. <label for="email">E-mail:</label>
7. <input type="email" name="email" id="email" placeholder="你的電子郵箱..">
8. </div>

2. 文本域

對於多行文本輸入可使用 textarea，它會自動爲我們調整大小。

1. <div class="ui-field-contain">
2. <label for="info">附加信息:</label>
3. <textarea name="addinfo" id="info"></textarea>
4. </div>

3. 搜索輸入框

jQuery Mobile爲我們提供了一個type='search'搜索輸入框，如下代碼：

1. <div class="ui-field-contain">
2. <label for="search">搜索:</label>
3. <input type="search" name="search" id="search">
4. </div>

4. 單選按鈕

單選按鈕用來提供一組選項，其中只有一個單一的項目可以被選擇。爲了創建一系列單選按鈕，添加帶有 type="radio" 的 input 以及相應的 label。把單選按鈕包圍在元素內。也可以添加一個

元素來定義

5. 複選框

複選框用來提供一組選項，可以選中不止一個選項。當用戶在有限數量的選擇中選取一個或多個選項時使用。與單選按鈕一樣也放在fidldset元素內。

1. <fieldset data-role="controlgroup">
2. <legend>Choose as many favorite colors as you'd like:</legend>
3. <label for="red">Red</label>
4. <input type="checkbox" name="favcolor" id="red" value="red">
5. <label for="green">Green</label>
6. <input type="checkbox" name="favcolor" id="green" value="green">
7. <label for="blue">Blue</label>
8. <input type="checkbox" name="favcolor" id="blue" value="blue">
9. </fieldset>