jQuery Mobile 會(huì)自動(dòng)為 HTML 表單自動(dòng)添加樣式，讓它們看起來(lái)更具吸引力，觸摸起來(lái)更具友好性。


jQuery Mobile 表單結(jié)構(gòu)

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

在 jQuery Mobile 中，您可以使用下列表單控件：

  • 文本輸入框

  • 搜索輸入框

  • 單選按鈕

  • 復(fù)選框

  • 選擇菜單

  • 滑動(dòng)條

  • 翻轉(zhuǎn)撥動(dòng)開(kāi)關(guān)

當(dāng)使用 jQuery Mobile 表單時(shí)，您應(yīng)當(dāng)知道：

  • <form> 元素必須有一個(gè) method 和一個(gè) action 屬性

  • 每個(gè)表單元素必須有一個(gè)唯一的 "id" 屬性。id 必須是整個(gè)站點(diǎn)所有頁(yè)面上唯一的。這是因?yàn)?jQuery Mobile 的單頁(yè)導(dǎo)航機(jī)制使得多個(gè)不同頁(yè)面在同一時(shí)間被呈現(xiàn)

  • 每個(gè)表單元素必須有一個(gè)標(biāo)簽。設(shè)置標(biāo)簽的 for 屬性來(lái)匹配元素的 id

實(shí)例

<form method="post" action="demoform.html">
 <label for="fname">姓名:</label>
 <input type="text" name="fname" id="fname">
</form>

如需隱藏標(biāo)簽，請(qǐng)使用 class ui-hidden-accessible。這在您把元素的 placeholder 屬性作為標(biāo)簽時(shí)經(jīng)常用到：                  

實(shí)例

<form method="post" action="demoform.html">

 <label for="fname" class="ui-hidden-accessible">姓名:</label>
 <input type="text" name="fname" id="fname" placeholder="姓名...">
</form>

提示：  我們可以使用 data-clear-btn="true" 屬性來(lái)添加清除輸入框內(nèi)容的按鈕 (一個(gè)在輸入框右側(cè)的 X 圖標(biāo)):

實(shí)例

<label for="fname">姓名:</label>
<input type="text" name="fname" id="fname" data-clear-btn="true">


點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例 

Note清除輸入框的按鈕可以在 <input> 元素中使用，但不能在 <textarea> 中使用。 搜索框中 data-clear-btn 默認(rèn)值為 "true" ，你可以使用 data-clear-btn="false" 移除該圖標(biāo)。

jQuery Mobile 表單圖標(biāo)

表單中的按鈕代碼是標(biāo)準(zhǔn)的 HTML <input> 元素 (button, reset, submit)。他們會(huì)自動(dòng)渲染樣式，可以自動(dòng)適配移動(dòng)設(shè)備與桌面設(shè)備：

實(shí)例

<input type="button" value="按鈕">
<input type="reset" value="重置按鈕">
<input type="submit" value="提交按鈕">

如果需要在 <input> 按鈕中添加額外的樣式，可以使用下表中的 data-* 屬性：

屬性值描述
data-cornerstrue | false指定按鈕是否有圓角
data-icon圖標(biāo)參考手冊(cè)指定按鈕圖標(biāo)
data-iconposleft | right | top | bottom | notext指定圖標(biāo)位置
data-inlinetrue | false指定是否內(nèi)聯(lián)按鈕
data-minitrue | false指定是否為迷你按鈕
data-shadowtrue | false指定按鈕是否添加陰影效果

按鈕添加圖標(biāo)：

實(shí)例

<input type="button" value="按鈕">
<input type="reset" value="重置按鈕">
<input type="submit" value="提交按鈕">

字段容器

如需讓標(biāo)簽和表單元素看起來(lái)更適應(yīng)寬屏，請(qǐng)用帶有 "ui-field-contain" 類(lèi)的 <div> 或 <fieldset> 元素包圍 label/form 元素：

實(shí)例

<form method="post" action="demoform.php">
  <div class="ui-field-contain">
    <label for="fname">姓:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">姓:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

ui-field-contain 類(lèi)基于頁(yè)面的寬度為標(biāo)簽和表單控件添加樣式。當(dāng)頁(yè)面的寬度大于 480px 時(shí)，它會(huì)自動(dòng)把標(biāo)簽放置在與表單控件同一線上。當(dāng)頁(yè)面的寬度小于 480px 時(shí)，標(biāo)簽會(huì)被放置在表單元素的上面。

提示：為了防止 jQuery Mobile 為可點(diǎn)擊元素自動(dòng)添加樣式，請(qǐng)使用 data-role="none" 屬性：

實(shí)例

<label for="fname">姓名:</label>

<input type="text" name="fname" id="fname" data-role="none">


lampjQuery Mobile 中的表單提交

jQuery Mobile 通過(guò) AJAX 自動(dòng)處理表單提交，并將試圖集成服務(wù)器響應(yīng)到應(yīng)用程序的 DOM 中。