一.表單組件基礎(chǔ)

?

1.組件簡介

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

?

jQuery Mobile 的表單組件有以下幾種：

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

?

2.組件使用規(guī)范

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

?

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

?

二.表單組件詳解

?

1.文本輸入框

在 jQuery Mobile 中，文本輸入框和文本輸入域都是使用標準 HTML 標記的，并且支持一些 HTML5 的 input 類型，如 password, email, tel, number, range 等更多的類型，而對于一些類型（ range, serach ） jQuery Mobile 則會將其轉(zhuǎn)換為 text 的 input 類型，統(tǒng)一標準化其樣式，下面是文本輸入框的調(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.搜索輸入框

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

?

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

?

4.單選框

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

?

          <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">藍</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.復選框

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

?

          <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>復選框</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>
        

?

默認的復選框組件是垂直排列選項的，我們可以在 fieldset 上添加 data-type="horizontal" 使其樣式改為水平按鈕組的樣式， jQuery Mobile 會使選項元素浮動并去掉圖標。

?

接下來還有其他一些表單組件、有關(guān)組件的技巧及完整示例，因為內(nèi)容甚多，就寫作另一篇文章了。

?

原文由 Kayo Lee 發(fā)表，原文鏈接： http://kayosite.com/web-app-by-jquery-mobile-and-html5-form-part-one.html