雷林鵬分享：jQuery Mobile 表單

　　jQuery Mobile 表單

　　jQuery Mobile 會自動爲 HTML 表單自動添加樣式，讓它們看起來更具吸引力，觸摸起來更具友好性。

　　jQuery Mobile 表單結構

　　jQuery Mobile 使用 CSS 爲 HTML 表單元素添加樣式，讓它們更具吸引力，更易於使用。

　　在 jQuery Mobile 中，您能夠使用下列表單控件：

　　文本輸入框

　　搜索輸入框

　　單選按鈕

　　複選框

　　選擇菜單

　　滑動條

　　翻轉撥動開關

　　當使用 jQuery Mobile 表單時，您應當知道：

　　

元素必須有一個 method 和一個 action 屬性

 

　　每一個表單元素必須有一個惟一的 "id" 屬性。id 必須是整個站點全部頁面上惟一的。這是由於 jQuery Mobile 的單頁導航機制使得多個不一樣頁面在同一時間被呈現

　　每一個表單元素必須有一個標籤。設置標籤的 for 屬性來匹配元素的 id

　　實例

　　

　　姓名:

　　

　　

 

　　嘗試一下 »

　　如需隱藏標籤，請使用 class ui-hidden-accessible。這在您把元素的 placeholder 屬性做爲標籤時常常用到：

　　實例

　　

 

　　姓名:

　　

　　

 

　　嘗試一下 »

　　Field 容器

　　如需讓標籤和表單元素看起來更適應寬屏，請用帶有 data-role="fieldcontain" 屬性的

或

元素包圍 label/form 元素：

 

　　實例

　　

 

　　

 

　　姓:

　　

　　名:

　　

　　

>

 

　　

 

　　嘗試一下 »

fieldcontain 屬性基於頁面的寬度爲標籤和表單控件添加樣式。當頁面的寬度大於 480px 時，它會自動把標籤放置在與表單控件同一線上。當頁面的寬度小於 480px 時，標籤會被放置在表單元素的上面。

　　提示：爲了防止 jQuery Mobile 爲可點擊元素自動添加樣式，請使用 data-role="none" 屬性：

　　實例

　　姓名:

　　

　　嘗試一下 »

jQuery Mobile 中的表單提交

　　jQuery Mobile 經過 AJAX 自動處理表單提交，並將試圖集成服務器響應到應用程序的 DOM 中。

　　本文轉載自：w3cschool(編輯：雷林鵬 來源：網絡 侵刪)