jQuery Mobile 表單
2018-02-03 11:43 更新
jQuery Mobile 表單
jQuery Mobile 會自動為 HTML 表單自動添加樣式，讓它們看起來更具吸引力，觸摸起來更具友好性。
jQuery Mobile 表單結構
jQuery Mobile 使用 CSS 為 HTML 表單元素添加樣式，讓它們更具吸引力，更易于使用。
在 jQuery Mobile 中，您可以使用下列表單控件：
- 文本輸入框
- 搜索輸入框
- 單選按鈕
- 復選框
- 選擇菜單
- 滑動條
- 翻轉撥動開關
當使用 jQuery Mobile 表單時，您應當知道：
- <form> 元素必須有一個 method 和一個 action 屬性
- 每個表單元素必須有一個唯一的 "id" 屬性。id 必須是整個站點所有頁面上唯一的。這是因為 jQuery Mobile 的單頁導航機制使得多個不同頁面在同一時間被呈現(xiàn)
- 每個表單元素必須有一個標簽。設置標簽的 for 屬性來匹配元素的 id
實例
<form method="post" action="demoform.html">
<label for="fname">姓名:</label>
<input type="text" name="fname" id="fname">
</form>
<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>
<label for="fname" class="ui-hidden-accessible">姓名:</label>
<input type="text" name="fname" id="fname" placeholder="姓名...">
</form>
嘗試一下 ?
Field 容器
如需讓標簽和表單元素看起來更適應寬屏，請用帶有 data-role="fieldcontain" 屬性的 <div> 或 <fieldset> 元素包圍 label/form 元素：
實例
<form method="post" action="demoform.html">
<div data-role="fieldcontain">
<label for="fname">姓:</label>
<input type="text" name="fname" id="fname">
<label for="lname">名:</label>
<input type="text" name="lname" id="lname">
</div>>
</form>
<div data-role="fieldcontain">
<label for="fname">姓:</label>
<input type="text" name="fname" id="fname">
<label for="lname">名:</label>
<input type="text" name="lname" id="lname">
</div>>
</form>
嘗試一下 ?
|
fieldcontain 屬性基于頁面的寬度為標簽和表單控件添加樣式。當頁面的寬度大于 480px 時，它會自動把標簽放置在與表單控件同一線上。當頁面的寬度小于 480px 時，標簽會被放置在表單元素的上面。 |
|---|
提示：為了防止 jQuery Mobile 為可點擊元素自動添加樣式，請使用 data-role="none" 屬性：
實例
<label for="fname">姓名:</label>
<input type="text" name="fname" id="fname" data-role="none">
<input type="text" name="fname" id="fname" data-role="none">
嘗試一下 ?
|
|
jQuery Mobile 中的表單提交
jQuery Mobile 通過 AJAX 自動處理表單提交，并將試圖集成服務器響應到應用程序的 DOM 中。 |
|---|
相關閱讀
以上內容是否對您有幫助：
更多建議：