jQuery Mobile的自動式的HTML表單,使它們看起來引人入勝和觸摸友好。
jQuery Mobile Form結構
jQuery Mobile的使用CSS樣式的HTML表單元素,使得他們有吸引力和易於使用。
在jQuery Mobile的,你可以用下面的表單控件:
- 文本輸入框
- 搜索輸入
- 單選按鈕
- 複選框
- 選擇菜單
- 滑塊
- 翻轉撥動開關
當使用jQuery Mobile的形式工作,你應該知道:
- 在<form>元素必須具有一種方法和action屬性
- 每個表單元素必須有一個獨特的“id”屬性。 該ID必須在整個站點的網頁的唯一。 這是因為jQuery Mobile的單頁導航模型允許許多不同的“頁面”是存在在同一時間
- 每個表單元素必須有標籤。 設置為標籤的屬性相匹配的元素的id
例
<form method="post" action="demoform.asp" >
<label for="fname"> First name: </label>
<input
type="text" name="fname" id="fname" >
</form>
試一試» 提示:使用佔位符來指定一個描述輸入字段的預期值短的提示:
例
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
試一試» 提示:要隱藏的標籤,使用"ui-hidden-accessible"類。 這是經常使用,當你想要的元素的佔位符屬性作為標籤:
例
<label for="fname"
class="ui-hidden-accessible" ">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
試一試» 提示:如果你想有一個"clear button" (上清除字段的內容輸入欄右側的X圖標),添加數據明確BTN =“true”屬性:
例
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-clear-btn="true" >
試一試» 在"clear button"可在任何可以添加<input>元素,除了<textarea> 。 搜索領域有此屬性設置為"true"為默認-去改變它,只需指定data-clear-btn="false" 。
jQuery Mobile的表單按鈕
在表單按鈕編碼標準的HTML <input>元素(按鈕,重置,提交)。 它們會自動樣式,使它們有吸引力的和容易使用的移動設備和桌面計算機上:
例
<input type="button" value="Button">
<input type="reset" value="Reset
Button">
<input type="submit" value="Submit Button">
試一試» 以另外一種樣式<輸入>按鈕,請使用下表中列出的數據 - *屬性:
粗體數值表示默認值。
屬性 | 值 | 描述 |
---|---|---|
data-corners | true | false | 指定按鈕是否應該具有圓角或不 |
data-icon | Icons Reference | 指定按鈕的圖標 |
data-iconpos | left | right | top | bottom | notext | 指定圖標的位置 |
data-inline | true | false | 指定按鈕是否應為內聯與否 |
data-mini | true | false | 指定按鈕是否應該是小的或不 |
data-shadow | true | false | 指定按鈕是否應該有陰影或不 |
包含或排除你想/不想屬性(S):
<input type="submit" value="Submit" data-icon="check"
data-iconpos="right" data-inline="true">
試一試» Field Containers
為了使標籤和表單元素正確看待更寬的屏幕,一個包裝<div>或<fieldset>元素的"ui-field-contain"標籤/表單元素周圍類:
例
<form method="post" action="demoform.asp">
<div class="ui-field-contain" >
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname">
<label for="lname">Last
name:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
試一試» 在"ui-field-contain"根據頁面的寬度類樣式標籤和表單控件。 當頁面的寬度比480像素時,它自動將標籤上的同一行的形式控制。 當小於480像素,標籤將被放置在表單元素之上。
提示:要防止jQuery Mobile的自動風格tappable /點擊元素,使用data-role="none"屬性:
例
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-role="none" >
試一試» 表單提交jQuery中移動
jQuery Mobile的將通過AJAX自動處理表單提交,並試圖整合服務器響應到應用程序的DOM。