jQuery Mobile 表單基礎
jQuery Mobile 會自動為 HTML 表單自動新增樣式，讓它們看起來更具吸引力，觸控起來更具友善性。
jQuery Mobile 表單結構
jQuery Mobile 使用 CSS 為 HTML 表單元素新增樣式，讓它們更具吸引力，更容易使用。
在jQuery Mobile 中，您可以使用下列表單控制項：
#文字輸入框
搜尋輸入框
單選按鈕
#複選框
#選擇選單
-
#滑動條
翻轉撥動開關
#當使用jQuery Mobile 表單時，您應該知道：
<form> 元素必須有一個method 和一個action 屬性
每個表單元素必須有一個唯一的"id" 屬性。 id 必須是整個網站所有頁面上唯一的。這是因為 jQuery Mobile 的單頁導航機制使得多個不同頁面在同一時間被呈現
每個表單元素必須有一個標籤。設定標籤的for 屬性來匹配元素的id
」實例
<form method="post" action="demoform.html"> <label for="fname">姓名:</label> <input type="text" name="fname" id="fname"> </form>
如需隱藏標籤，請使用class ui-hidden-accessible。這在您把元素的placeholder 屬性當作標籤時常用到：
#
<form method="post" action="demoform.html"> <label for="fname" class="ui-hidden-accessible">姓名:</label> <input type="text" name="fname" id="fname" placeholder="姓名..."> </form>
##提示：
我們可以使用
data-clear-btn="true" 屬性來新增清除輸入框內容的按鈕(一個在輸入框右側的X 圖示):
實例
<label for="fname">姓名:</label> <input type="text" name="fname" id="fname" data-clear-btn="true">
點擊"運行實例" 按鈕查看線上實例
 |
|---|
jQuery Mobile 表單圖示
表單中的按鈕程式碼是標準的 HTML <input> 元素 (button, reset, submit)。他們會自動渲染樣式，可以自動適應行動裝置與桌面裝置：
#範例
<input type="button" value="按钮"> <input type="reset" value="重置按钮"> <input type="submit" value="提交按钮">
如果需要在<input> 按鈕中新增額外的樣式，可以使用下表中的data-* 屬性：
| 屬性 | 值 | 描述 |
|---|---|---|
| data-corners | #true | false | #指定按鈕是否有圓角落 |
| data-icon | 圖示參考手冊 | #指定按鈕圖示 |
| data-iconpos | left | right | top | bottom | notext | #指定圖示位置 |
| data-inline | # true | false | 指定是否內聯按鈕 |
| #data-mini | true | false | 指定是否為迷你按鈕 |
| data-shadow | #true | false | #指定按鈕是否新增陰影效果 |
按鈕新增圖示：
」實例
##<input type="button" value="按钮"> <input type="reset" value="重置按钮"> <input type="submit" value="提交按钮">
字段容器如需讓標籤和表單元素看起來更適應寬屏，請用帶有"ui-field-contain" 類別的<div> ; 或<fieldset> 元素包圍label/form 元素：
#實例
<form method="post" action="demoform.php"> <div class="ui-field-contain"> <label for="fname">姓:</label> <input type="text" name="fname" id="fname"> <label for="lname">姓:</label> <input type="text" name="lname" id="lname"> </div> </form>
ui-field-contain 類別基於頁面的寬度為標籤和表單控制項新增樣式。當頁面的寬度大於 480px 時，它會自動把標籤放置在與表單控制項相同線上。當頁面的寬度小於 480px 時，標籤會被放置在表單元素的上方。
| 提示：為了防止jQuery Mobile 為可點擊元素自動新增樣式，請使用data-role="none" 屬性： | 實例<label for="fname">姓名:</label> <input type="text" name="fname" id="fname" data-role="none"> |
|---|
