# jQuery Mobile 表單 jQuery Mobile 會自動為 HTML 表單自動添加樣式，讓它們看起來更具吸引力，觸摸起來更具友好性。  ## jQuery Mobile 表單結構 jQuery Mobile 使用 CSS 為 HTML 表單元素添加樣式，讓它們更具吸引力，更易于使用。 在 jQuery Mobile 中，您可以使用下列表單控件： * 文本輸入框 * 搜索輸入框 * 單選按鈕 * 復選框 * 選擇菜單 * 滑動條 * 翻轉撥動開關 當使用 jQuery Mobile 表單時，您應當知道： * &lt;form&gt; 元素必須有一個 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> ``` ## Field 容器 如需讓標簽和表單元素看起來更適應寬屏，請用帶有 data-role="fieldcontain" 屬性的 &lt;div&gt; 或 &lt;fieldset&gt; 元素包圍 label/form 元素： ## 實例 ``` <form method="post" action="demoform.html"> <div data-role="fieldcontain"> <label for="fname">姓:</label> <input type="text" name="fname" id="fname"> <label for="lname">名:</label> <input type="text" name="lname" id="lname"> </div>> </form> ``` >  > fieldcontain 屬性基于頁面的寬度為標簽和表單控件添加樣式。當頁面的寬度大于 480px 時，它會自動把標簽放置在與表單控件同一線上。當頁面的寬度小于 480px 時，標簽會被放置在表單元素的上面。 **提示：**為了防止 jQuery Mobile 為可點擊元素自動添加樣式，請使用 data-role="none" 屬性： ## 實例 ``` <label for="fname">姓名:</label> <input type="text" name="fname" id="fname" data-role="none"> ``` >  > **jQuery Mobile 中的表單提交** > jQuery Mobile 通過 AJAX 自動處理表單提交，并將試圖集成服務器響應到應用程序的 DOM 中。