jQuery Mobile 表單

jQuery Mobile 會自動為 HTML 表單自動新增樣式，讓它們看起來更具吸引力，觸控起來更具友好性。


jQuery Mobile 表單結構

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

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

  • 文字輸入框
  • 搜尋輸入框
  • 單選按鈕
  • 複選框
  • 選擇選單
  • 滑動條
  • 翻轉撥動開關

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

  • <form> 元素必須有一個 method 和一個 action 屬性
  • 每個表單元素必須有一個唯一的 "id" 屬性。id 必須是整個站點所有頁面上唯一的。這是因為 jQuery Mobile 的單頁導航機制使得多個不同頁面在同一時間被呈現
  • 每個表單元素必須有一個標籤。設定標籤的 for 屬性來匹配元素的 id

例項

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

嘗試一下 ?

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

例項

<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" 屬性來新增清除輸入框內容的按鈕 (一個在輸入框右側的 X 圖示):

例項

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

嘗試一下 ?
Note 清除輸入框的按鈕可以在 <input> 元素中使用，但不能在 <textarea> 中使用。 搜尋框中 data-clear-btn 預設值為 "true" ，你可以使用 data-clear-btn="false" 移除該圖示。

jQuery Mobile 表單圖示

表單中的按鈕程式碼是標準的 HTML <input> 元素 (button, reset, submit)。他們會自動渲染樣式，可以自動適配移動裝置與桌面裝置：

例項

<input type="button" value=https://www.itread01.com/jquerymobile/"按鈕">
<input type="reset" value=https://www.itread01.com/jquerymobile/"重置按鈕">
<input type="submit" value=https://www.itread01.com/jquerymobile/"提交按鈕">

嘗試一下 ?

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

屬性 值 描述
data-corners true | false 指定按鈕是否有圓角
data-icon 圖示參考手冊 指定按鈕圖示
data-iconpos left | right | top | bottom | notext 指定圖示位置
data-inline true | false 指定是否內聯按鈕
data-mini true | false 指定是否為迷你按鈕
data-shadow true | false 指定按鈕是否新增陰影效果

按鈕新增圖示：

<input type="button" value=https://www.itread01.com/jquerymobile/"按鈕">
<input type="reset" value=https://www.itread01.com/jquerymobile/"重置按鈕">
<input type="submit" value=https://www.itread01.com/jquerymobile/"提交按鈕">

嘗試一下 ?

欄位容器

如需讓標籤和表單元素看起來更適應寬屏，請用帶有 "ui-field-contain" 類的 <div> 或 <fieldset> 元素包圍 label/form 元素：

例項

<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 類基於頁面的寬度為標籤和表單控制元件新增樣式。當頁面的寬度大於 480px 時，它會自動把標籤放置在與表單控制元件同一線上。當頁面的寬度小於 480px 時，標籤會被放置在表單元素的上面。

提示：為了防止 jQuery Mobile 為可點選元素自動新增樣式，請使用 data-role="none" 屬性：

例項

<label for="fname">姓名:</label>
<input type="text" name="fname" id="fname" data-role="none">

嘗試一下 ?

jQuery Mobile 中的表單提交

jQuery Mobile 通過 AJAX 自動處理表單提交，並將試圖整合伺服器響應到應用程式的 DOM 中。