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>
<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>
<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" >
<input type="text" name="fname" id="fname" data-clear-btn="true" >
嘗試一下»
 | 清除輸入框的按鈕可以在<input> 元素中使用，但不能在<textarea> 中使用。 搜索框中data-clear-btn 默認值為"true" ，你可以使用data-clear-btn="false" 移除該圖標。 |
|---|
jQuery Mobile 表單圖標
表單中的按鈕代碼是標準的HTML <input> 元素(button, reset, submit)。 他們會自動渲染樣式，可以自動適配移動設備與桌面設備：
實例
<input type="button" value="按鈕">
<input type="reset" value="重置按鈕">
<input type="submit" 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="提交按鈕">
<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>
<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" >
<input type="text" name="fname" id="fname" data-role="none" >
嘗試一下»
| jQuery Mobile中的表單提交 jQuery Mobile 通過AJAX 自動處理表單提交，並將試圖集成服務器響應到應用程序的DOM 中。 |
|---|