jQuery Mobile 會自動為 HTML 表單添加優(yōu)異的便于觸控的外觀。

jQuery Mobile 表單結構

jQuery Mobile 使用 CSS 來設置 HTML 表單元素的樣式，以使其更有吸引力更易用。

在 jQuery Mobile 中，您可以使用以下表單控件：

• 文本框
• 搜索框
• 單選框
• 復選框
• 選擇菜單
• 滑動條
• 翻轉切換開關

當您與 jQuery Mobile 表單打交道時，應該了解以下信息：

• <form> 元素必須設置 method 和 action 屬性
• 每個表單元素必須設置唯一的 "id" 屬性。該 id 在站點的頁面中必須是唯一的。這是因為 jQuery Mobile 的單頁面導航模型允許許多不同的“頁面”同時呈現(xiàn)。
• 每個表單元素必須有一個標記（label）。請設置 label 的 for 屬性來匹配元素的 id。

實例

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>

親自試一試

如需隱藏 label，請使用類 ui-hidden-accessible。這很常用，當您需要元素的 placeholder 屬性充當 label 時：

實例

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">姓名：</label>
  <input type="text" name="fname" id="fname" placeholder="姓名...">
</form>

親自試一試

域容器

如果需要 label 和表單元素在寬屏幕上顯示正常，請用帶有 data-role="fieldcontain" 屬性的 <div> 或 <fieldset> 元素來包裝 label 或表單元素：

實例

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

親自試一試

提示：fieldcontain 屬性基于頁面寬度來設置 label 和表單控件的樣式。當頁面寬度大于 480px 時，它會自動將 label 與表單控件放置于同一行。當小于 480px 時，label 會被放置于表單元素之上。

提示：如需避免 jQuery Mobile 自動為可點擊元素設置樣式，請使用 data-role="none" 屬性：

實例

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname" data-role="none">

親自試一試

在 jQuery Mobile 中提交表單

提示：jQuery Mobile 會自動通過 AJAX 進行表單提交，并會嘗試將服務器響應整合入應用程序的 DOM 中。