一.表單組件基礎(chǔ)
1.組件簡(jiǎn)介
jQuery Mobile 中的表單組件是基于標(biāo)準(zhǔn) HTML ，然后在此基礎(chǔ)上增強(qiáng)樣式，因此即使瀏覽器不支持 jQuery Mobile 表單仍可正常使用。需要注意的是， jQuery Mobile 會(huì)把表單元素增強(qiáng)為觸摸設(shè)備很容易使用的形式，因此對(duì)于 iphone/ipad 與 Android 使用 Web 表單將會(huì)變得非常方便。

jQuery Mobile 的表單組件有以下幾種：
（1）文本輸入框， type="text" 標(biāo)記的 input 元素會(huì)自動(dòng)增強(qiáng)為 jQuery Mobile 樣式，無需額外添加 data-role 屬性。
（2）文本輸入域， textarea 元素會(huì)被自動(dòng)增強(qiáng)，無需額外添加 data-role 屬性，用于多行輸入文本，jQuery Mobile 會(huì)自動(dòng)增大文本域的高度，避免在移動(dòng)設(shè)備中很難找到滾動(dòng)條的情況。
（3）搜索輸入框， type="search" 標(biāo)記的 input 元素會(huì)自動(dòng)增強(qiáng)，無需額外添加 data-role 屬性，這是一個(gè)新的 HTML 元素，增強(qiáng)后的輸入框左邊有一個(gè)放大鏡圖標(biāo)，點(diǎn)擊觸發(fā)搜索，在輸入內(nèi)容后，輸入框的右邊還會(huì)出現(xiàn)一個(gè)叉的圖標(biāo)，點(diǎn)擊清除已輸入的內(nèi)容，非常方便。
（4）單選按鈕， type="radio" 標(biāo)記的 input 元素會(huì)自動(dòng)增強(qiáng)，無需額外添加 data-role 屬性。
（5）復(fù)選按鈕， type="checkbox" 標(biāo)記的 input 元素會(huì)自動(dòng)增強(qiáng)，無需額外添加 data-role 屬性。
（6）選擇列表， select 元素會(huì)被自動(dòng)增強(qiáng)，無需額外添加 data-role 屬性。
（7）劃桿， type="range" 標(biāo)記的 input 元素會(huì)自動(dòng)增強(qiáng)，無需額外添加 data-role 屬性。
（8）開關(guān)， select 元素添?加 data-role="slider" 屬性后會(huì)被增強(qiáng)會(huì) jQuery Mobile 的開關(guān)組件， select 中只能有兩個(gè) option。

2.組件使用規(guī)范
所有的表單組件，只要是需要與服務(wù)器傳送數(shù)據(jù)，都應(yīng)該包裹在一個(gè) form 標(biāo)簽內(nèi)，并且應(yīng)該指定好 form 的 action 和 method 屬性。當(dāng)然如果你使用的是 Web SQL Database 這類本地儲(chǔ)存，即數(shù)據(jù)并不需要與服務(wù)器傳送，可以不用 form 標(biāo)簽和 sumbit 提交。另外 form 的 id 需要在整站中唯一，由于 jQuery Mobile 使用 Ajax 導(dǎo)航，因此不同的 page 可以同時(shí)加載到一個(gè) DOM 中，因此 form id 必須整站唯一以保證每個(gè) DOM 的表單 id 都是不同的。

每一個(gè)表單元素應(yīng)該要有相應(yīng)的 label 對(duì)應(yīng)，label 的 for 值要與元素的 id 相同，使其在語義上相關(guān)，并且可以使用一個(gè)帶有 data-role="fieldcontain" 屬性的 div 或 fieldset 容器包裹， jQuery Mobile 會(huì)自動(dòng)在容器底部增加一條細(xì)邊框作為分隔。

二.表單組件詳解
1.文本輸入框
在 jQuery Mobile 中，文本輸入框和文本輸入域都是使用標(biāo)準(zhǔn) HTML 標(biāo)記的，并且支持一些 HTML5 的 input 類型，如 password, email, tel, number, range 等更多的類型，而對(duì)于一些類型（ range, serach ） jQuery Mobile 則會(huì)將其轉(zhuǎn)換為 text 的 input 類型，統(tǒng)一標(biāo)準(zhǔn)化其樣式，下面是文本輸入框的調(diào)用代碼及示圖。

<div data-role="fieldcontain">  <label for="text">文本輸入框</label>  <input type="text" name="text" id="text" value="" /></div>

2.文本輸入域

<div data-role="fieldcontain">  <label for="textarea">文本輸入域</label>  <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea></div>

3.搜索輸入框
正如上文所述，增強(qiáng)后的輸入框左邊有一個(gè)放大鏡圖標(biāo)，點(diǎn)擊觸發(fā)搜索，在輸入內(nèi)容后，輸入框的右邊還會(huì)出現(xiàn)一個(gè)叉的圖標(biāo)，點(diǎn)擊清除已輸入的內(nèi)容。

<div data-role="fieldcontain">  <label for="search">搜索輸入框</label>  <input type="search" name="search" id="search" value="" /></div>

4.單選框
單選框組件用于在頁面中提供一組選項(xiàng)，并且只能選擇其中一個(gè)選項(xiàng)。在 jQuery Mobile 中，單選框組件不但在外觀上美化了，還增加了一些圖標(biāo)用于增強(qiáng)視覺反饋。 type="radio" 標(biāo)記的 input 元素會(huì)自動(dòng)增強(qiáng)為單選框組件，但 jQuery Mobile 建議開發(fā)者使用一個(gè)帶 data-role="controlgroup" 屬性的 fieldset 標(biāo)簽包括選項(xiàng)，并且在 fieldset 內(nèi)增加一個(gè) legend 元素，用于表示該單選框的標(biāo)題。

<div data-role="fieldcontain">  <fieldset data-role="controlgroup">    <legend>單選框:</legend>    <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" />    <label for="radio-choice-1">藍(lán)</label>    <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />    <label for="radio-choice-2">綠</label>    <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />    <label for="radio-choice-3">黑</label>  </fieldset></div>

5.復(fù)選框
復(fù)選框也是用于在頁面中提供一組選項(xiàng)的，但可以同時(shí)選擇多個(gè)選項(xiàng)。與單選框相同，復(fù)選框組件也無需額外調(diào)用 data-role 屬性， type="checkbox" 標(biāo)記的 input 元素會(huì)自動(dòng)增強(qiáng)為 jQuery Mobile 樣式，當(dāng)然 jQuery Mobile 也建議開發(fā)者使用一個(gè)帶 data-role="controlgroup" 屬性的 fieldset 標(biāo)簽包括選項(xiàng)，并且在 fieldset 內(nèi)增加一個(gè) legend 元素，用于表示該復(fù)選框的標(biāo)題。

<div data-role="fieldcontain">  <fieldset data-role="controlgroup">    <legend>復(fù)選框</legend>     <input type="checkbox" name="blue" id="effect1" class="custom" />     <label for="effect1">效果1</label>    <input type="checkbox" name="green" id="effect2" class="custom" />    <label for="effect2">效果2</label>    <input type="checkbox" name="pink" id="effect2" class="custom" />    <label for="effect2">效果3</label>  </fieldset></div>

默認(rèn)的復(fù)選框組件是垂直排列選項(xiàng)的，我們可以在 fieldset 上添加 data-type="horizontal" 使其樣式改為水平按鈕組的樣式， jQuery Mobile 會(huì)使選項(xiàng)元素浮動(dòng)并去掉圖標(biāo)。

6.選擇列表
選擇列表是基于 HTML select 元素的，具有原生菜單和自定義菜單兩種形式，原生菜單與自定義菜單都有一個(gè)樣式美化了的選擇按鈕，不同的是在自定義菜單中原生的 option 元素將被隱藏， jQuery Mobile 會(huì)生成一個(gè)由 CSS3 和 HTML5 構(gòu)成的菜單代替，并且這個(gè)菜單是 ARIA 的。

關(guān)于 ARIA ，這里小科普一下： ARIA， 即 Accessible Rich Internet Application （ 加強(qiáng)無障礙網(wǎng)頁應(yīng)用程序 ），它是 W3C 的無障礙網(wǎng)頁倡議（WAI）工作小組在倡導(dǎo)大家使用的無障礙網(wǎng)頁應(yīng)用技術(shù)。它是一套獨(dú)立的規(guī)范，可以幫助 Web 程序，尤其是使運(yùn)用了大量前端技巧（ Ajax ）的網(wǎng)頁更具備可訪問性，通俗點(diǎn)說，讀屏設(shè)備等不大能理解前端語義的設(shè)備將可以了解到頁面的內(nèi)容，這樣殘疾人士不僅可以瀏覽網(wǎng)頁甚至與頁面進(jìn)行交互。

HTML select 元素會(huì)被自動(dòng)增強(qiáng)為原生的選擇列表組件，若需要自定義樣式菜單，可以在 select 上添加 data-native-menu="false" 屬性。

若需要禁止選擇某一個(gè)選項(xiàng)，可以在選項(xiàng)的 option 標(biāo)簽上添加 disabled="disabled"。

下面給出一個(gè)自定義菜單的例子：

<div data-role="fieldcontain">  <label for="select-choice-1" class="select">選擇列表</label>  <select data-native-menu="false" name="select-choice-1" id="select-choice-1">    <option value="12h">12小時(shí)</option>    <option value="1d">一天</option>    <option value="2d">兩天</option>    <option value="week">一周</option>  </select></div>

選擇按鈕

自定義菜單

若需要多項(xiàng)選擇，則可以在 select 標(biāo)簽上添加 multiple="multiple" ，但原生的選擇菜單不支持該功能。對(duì)于多項(xiàng)選擇菜單，還有幾點(diǎn)要注意的：

（1）jQuery Mobile 會(huì)在菜單里創(chuàng)建一個(gè) jQuery Mobile header ，并在 header 的左邊添加一個(gè)關(guān)閉菜單按鈕。
（2）當(dāng)用戶選擇兩個(gè)或以上選項(xiàng)時(shí)選擇按鈕右側(cè)會(huì)出現(xiàn)一個(gè)小圖標(biāo)，圖標(biāo)內(nèi)顯示已選擇選項(xiàng)的個(gè)數(shù)。
（3）所有選擇的選項(xiàng)文本會(huì)顯示在選擇按鈕上，如果文字超出按鈕長(zhǎng)度，會(huì)以省略號(hào)代替多余的內(nèi)容。
（4）如果選項(xiàng)過多，菜單會(huì)以新頁面的形式顯示。
 
多項(xiàng)選擇列表實(shí)例

<div data-role="fieldcontain">  <label for="select-choice-2" class="select">多項(xiàng)選擇列表</label>  <select data-native-menu="false" multiple="multiple" name="select-choice-2" id="select-choice-2">    <option value="12h">12小時(shí)</option>    <option value="1d">一天</option>    <option value="2d">兩天</option>    <option value="week">一周</option>  </select></div>

另外我們還可以對(duì)選項(xiàng)進(jìn)行分組，使用以下標(biāo)簽標(biāo)簽把同一組的選項(xiàng)包裹起來，其中 label 的值為該分組的標(biāo)題。

<optgroup label="Group1"></optgroup> 

分組選擇列表實(shí)例

<div data-role="fieldcontain">  <label for="select-choice-3" class="select">分組選擇列表</label>  <select data-native-menu="false" name="select-choice-3" id="select-choice-3">    <optgroup label="Group1">      <option value="12h">12小時(shí)</option>      <option value="1d">一天</option>      <option value="2d">兩天</option>      <option value="week">一周</option>    </optgroup>    <optgroup label="Group2">      <option value="1m">一個(gè)月</option>      <option value="1q">一季度</option>      <option value="1y">一年</option>    </optgroup>  </select></div>

7.滑桿
在 jQuery Mobile 中，type="range" （ HTML5 屬性值 ） 的 input 元素會(huì)被增強(qiáng)為劃桿組件，該組件可以通過一些屬性值配置，value 設(shè)置滑桿的初始值， min 和 max 分別設(shè)置滑桿的下限和上限。另外滑桿組件還支持鍵盤響應(yīng)，鍵盤的右箭頭，上箭頭，Page Up 鍵都可以增加滑桿的當(dāng)前值，相應(yīng)的，左鍵頭，下箭頭， Page Down 鍵可以減少滑桿的當(dāng)前值，使用 Home 鍵和 End 鍵則可以設(shè)置當(dāng)前值為最小值（下限）和最大值（上限）。

<div data-role="fieldcontain">  <label for="slider">滑桿</label>  <input type="range" name="slider" id="slider" value="0" min="0" max="100" /></div>

8.開關(guān)
具有兩個(gè) option 的 select 元素添加 data-role="slider" 屬性后會(huì)被增強(qiáng)為 jQuery Mobile 的開關(guān)組件，用于表示布爾型數(shù)據(jù)（ ture or false ），拖動(dòng)滑動(dòng)條可以在“開”與“關(guān)”之間選擇，其中第一個(gè) option 會(huì)被渲染成“開”的樣式。

<div data-role="fieldcontain">  <label for="slider">開關(guān)</label>  <select name="slider" id="slider" data-role="slider">    <option value="off">關(guān)閉</option>    <option value="on">開啟</option>  </select> </div>

三.提交表單
jQuery Mobile 自動(dòng)采用 Ajax 的方式提交表單，默認(rèn)的 method 為 get ，action 為當(dāng)前頁面的相對(duì)路徑，在表單頁面和結(jié)果頁面之間會(huì)有平滑的轉(zhuǎn)場(chǎng)過渡，并且可以在表單上使用 data-transition 指定轉(zhuǎn)場(chǎng)效果。如果不想使用 Ajax 的方式提交表單，可以在全局事件禁用 Ajax （如何全局禁止 Ajax 并不在本文討論范圍，但會(huì)在本系列的后續(xù)文章中作詳細(xì)說明）或是在 form 上添加 data-ajax="false" 屬性，下面是 data-transition 的所有可取值。

slide 滑動(dòng)（默認(rèn)值，從左至右滑出）， slideup（從下至上滑出）， slidedown（從上至下滑出）， pop（從中心漸顯展開）， fade（漸顯）， flip（翻轉(zhuǎn)）。

四.主題樣式
關(guān)于主題樣式，在上一文中已經(jīng)介紹過了，這里引用一下：

“data-theme=“” 屬性， 所有的 jQuery Mobile 組件均支持該屬性，用于設(shè)置組件的顏色， 該屬性默認(rèn)有五個(gè)值 a, b, c, d, e，分別代表由深到淺五種顏色，另外開發(fā)者還可以通過在 CSS 里添加相應(yīng)的 Class 來自定義顏色。”

五.刷新表單組件
由于 jQuery Mobile 對(duì)原生的 HTML 表單元素進(jìn)行了渲染和追加元素，所以開發(fā)者想通過 js 直接控制表單組件會(huì)比較麻煩（如使用了 Web SQL Database 儲(chǔ)存了數(shù)據(jù)在本地，在打開網(wǎng)頁時(shí)希望通過 js 獲取數(shù)據(jù)并給表單組件賦值的情況），因此 jQuery Mobile 設(shè)計(jì)了用 js 給表單組件賦值的 API ，下面逐一舉例介紹：

1.單選按鈕
選擇第一個(gè)選項(xiàng)

$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");

2.復(fù)選按鈕
選擇第一個(gè)選項(xiàng)

$("input[type='checkbox']:first").attr("checked",true).checkboxradio("refresh");

3.選擇列表
選擇第一個(gè)選項(xiàng)，注意選項(xiàng)的索引是從1開始

var myselect = $('select#select-choice-1');myselect[0].selectedIndex = 1;myselect.selectmenu('refresh');

4.滑桿
設(shè)置值為40

$("input[type=range]").val(40).slider("refresh");

5.開關(guān)
選擇第一個(gè)選項(xiàng)

var myswitch = $('select#shakeToClear');myswitch[0].selectedIndex = 1;myswitch.slider('refresh');

注： refresh 方法不能直接使用在 Ajax 獲取的內(nèi)容上，例如 js 要操縱的表單組件在另一個(gè) Page， js 只在首頁加載時(shí)載入，這樣 jQuery Mobile 會(huì)出錯(cuò)（不會(huì)有直接報(bào)錯(cuò)，只是該段 js 會(huì)失效），我們可以使用 live('pagebeforeshow', function(){}) 方法使到該段 js 在過場(chǎng)到表單組件所在頁面時(shí)才載入（ pagebeforeshow 是 jQuery Mobile 事件之一，此外還有 pagebeforehide， pageshow， pagehide 三種方法）。下面給出一個(gè)例子：

$('#setting').live('pagebeforeshow', function(){    // 在頁面顯示時(shí)選擇菜單中第一個(gè)選項(xiàng)    var myselect = $('select#select-choice-1');    myselect[0].selectedIndex = 1;    myselect.selectmenu('refresh');});