jQuery Mobile 會(huì)自動(dòng)為 HTML 表單添加優(yōu)異的便于觸控的外觀。
jQuery Mobile 表單結(jié)構(gòu)
jQuery Mobile 使用 CSS 來設(shè)置 HTML 表單元素的樣式，以使其更有吸引力更易用。
在 jQuery Mobile 中，您可以使用以下表單控件：
- 文本框
- 搜索框
- 單選框
- 復(fù)選框
- 選擇菜單
- 滑動(dòng)條
- 翻轉(zhuǎn)切換開關(guān)
當(dāng)您與 jQuery Mobile 表單打交道時(shí)，應(yīng)該了解以下信息：
- <form> 元素必須設(shè)置 method 和 action 屬性
- 每個(gè)表單元素必須設(shè)置唯一的 "id" 屬性。該 id 在站點(diǎn)的頁面中必須是唯一的。這是因?yàn)?jQuery Mobile 的單頁面導(dǎo)航模型允許許多不同的“頁面”同時(shí)呈現(xiàn)。
- 每個(gè)表單元素必須有一個(gè)標(biāo)記（label）。請?jiān)O(shè)置 label 的 for 屬性來匹配元素的 id。
實(shí)例
<form method="post" action="demoform.asp"> <label for="fname">First name:</label> <input type="text" name="fname" id="fname"> </form>
親自試一試
如需隱藏 label，請使用類 ui-hidden-accessible。這很常用，當(dāng)您需要元素的 placeholder 屬性充當(dāng) label 時(shí)：
實(shí)例
<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 或表單元素：
實(shí)例
<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 屬性基于頁面寬度來設(shè)置 label 和表單控件的樣式。當(dāng)頁面寬度大于 480px 時(shí)，它會(huì)自動(dòng)將 label 與表單控件放置于同一行。當(dāng)小于 480px 時(shí)，label 會(huì)被放置于表單元素之上。
提示：如需避免 jQuery Mobile 自動(dòng)為可點(diǎn)擊元素設(shè)置樣式，請使用 data-role="none" 屬性：
實(shí)例
<label for="fname">First name:</label> <input type="text" name="fname" id="fname" data-role="none">
親自試一試
在 jQuery Mobile 中提交表單
提示：jQuery Mobile 會(huì)自動(dòng)通過 AJAX 進(jìn)行表單提交，并會(huì)嘗試將服務(wù)器響應(yīng)整合入應(yīng)用程序的 DOM 中。