當(dāng)在jqm框架中實現(xiàn)表單提交時，一般會使用ajax異步提交處理，并在表單頁和結(jié)果頁之間創(chuàng)建一個平滑的過渡效果。
為確保表單正常提交，建議form元素一定要定義action和method屬性，method屬性允許使用get和post兩種方式來提交表單。
<article data-role="content">
<form method="post">
<label for="name">name:</label>
<input type="text" name="name" id="name" value="" />
<label for="passwd">password:</label>
<input type="password" name="passwd" id="passwd" value="" />
<label for="tel">tel:</label>
<input type="tel" name="tel" id="tel" value="" />
<label for="search">搜索</label>
<input type="search" name="search" id="search" value="" />
<input type="button" name="sumbit" id="submit" value="提交">
</form>
</article>
上例中當(dāng)type為search類型時，自動在文本框前加放大鏡圖像
- slider類型
jqm允許添加一個range類型的范圍選擇型控件，該類型可通過value、min、max等屬性來定義可選擇范圍及初始默認(rèn)值
<label for="slider">分?jǐn)?shù)</label>
<input type="range" name="slider" id="slider" value="20" min="0" max="100" />
- select 元素結(jié)合slider類型實現(xiàn)開關(guān)功能效果的toggle switches組件
<label for="slider">切換</label>
<select name="slider" id="slider" data-role="slider" />
<option value="off">關(guān)閉</option>
<option value="on">開啟</option>
</select>
- 單選按鈕
創(chuàng)建單選按鈕步驟：- 為input元素定義type類型為radio，把label元素的for屬性設(shè)置為input元素的id屬性一樣；
- 按鍵組中l(wèi)abel元素用于顯示選項的文本內(nèi)容；推薦把一組單選按鈕元素放在fieldset元素內(nèi)，同事定義legend元素表示單選按鈕組的名稱；
-
設(shè)置fieldset元素的data-role為controlgroup，表示鈣元素內(nèi)飾一組單選按鈕。
<fieldset data-role="controlgroup">
<legend>請選擇您的年齡范圍：</legend>
<input type="radio" name="age" id="radio1" value="any" checked>
<label for="radio1">不限</label>
<input type="radio" name="age" id="radio2" value="16-22">
<label for="radio2">16-22歲</label>
<input type="radio" name="age" id="radio3" value="23-30">
<label for="radio3">23-30歲</label>
<input type="radio" name="age" id="radio4" value="31-45">
<label for="radio4">31-45歲</label>
<input type="radio" name="age" id="radio5" value="45">
<label for="radio5">大于45歲</label>
</fieldset>
Paste_Image.png
fieldset里設(shè)置data-type屬性值為horizontal 水平排列單選按鈕
Paste_Image.png
- 復(fù)選框類型
jqm中單選和復(fù)選框在語法方面是相同的，唯一不同的是input元素的屬性是checkbox；
- 下拉選擇菜單
創(chuàng)建下拉菜單的步驟：定義select元素以及option元素列表，設(shè)置label元素的for屬性為select元素的id屬性
定義label元素的文本內(nèi)容作為選項的名稱
-
定義div元素并設(shè)置data-role屬性為fieldcontain，并把select元素、label元素嵌套在該div內(nèi)。
<div data-role="fieldcontain"> <label for="level">最高學(xué)歷：</label> <select name="level" id="level"> <option value="0">小學(xué)畢業(yè)</option> <option value="1">初中畢業(yè)</option> <option value="2">高中畢業(yè)</option> <option value="3">大學(xué)?？?lt;/option> <option value="4">大學(xué)本科</option> <option value="5">碩士及以上</option> </select> </div>
- 數(shù)據(jù)項分組的選擇菜單
在select元素中指定optgroup元素并設(shè)置其label屬性，jqm會創(chuàng)建一個分割符的分組標(biāo)題，label屬性就是該分割符的標(biāo)題文本。
<div data-role="fieldcontain">
<label for="level">最高學(xué)歷：</label>
<select name="level" id="level">
<optgroup label="分組1"></optgroup>
<option value="0">小學(xué)畢業(yè)</option>
<option value="1">初中畢業(yè)</option>
<option value="2">高中畢業(yè)</option>
<optgroup label="分組2"></optgroup>
<option value="3">大學(xué)?？?lt;/option>
<option value="4">大學(xué)本科</option>
<option value="5">碩士及以上</option>
</select>
</div>
- 禁用option的某個選項：disabled
<option value="1" disabled>初中畢業(yè)</option> - 允許多選的菜單選項：multiple
<select name="level" id="level" multiple>
- <select name="level" id="level" data-native-menu="false" multiple>
data-native-menu="false" 表示采用jqm自定義的選擇窗口，默認(rèn)是true使用平臺內(nèi)置選擇器，為false時，選擇窗口左上方會有關(guān)閉按鈕
- option占位符
<div data-role="fieldcontain">
<label for="level" class="select">最高學(xué)歷：</label>
<select name="level" id="level" data-native-menu="false">
<option value="" data-placeholder="true">請選擇</option>
<option value="0">小學(xué)畢業(yè)</option>
<option value="1">初中畢業(yè)</option>
<option value="2">高中畢業(yè)</option>
<option value="3">大學(xué)?？?lt;/option>
<option value="4">大學(xué)本科</option>
<option value="5">碩士及以上</option>
</select>
</div>
- 更多data屬性
<div data-role="fieldcontain">
<label for="operation" class="select">操作：</label>
<select name="operation" id="operation" data-native-menu="false" data-icon="gear" data-inline="true">
<option value="" data-placeholder="true">請選擇</option>
<option value="0">編輯用戶</option>
<option value="1">刪除用戶</option>
</select>
</div>
