1 基础
jQuery Mobile 表单结构：form必须有method和action属性。 每个表单元素必须有唯一的id，每个表单元素必须有一个<label>元素，for属性匹配对应元素的id。
当元素使用placeholder来替代label时，给label添加class=‘ui-hidden-accessible’属性达到隐藏的目的。
form中所有元素的前面添加含有data-role='fieldcontain'属性的div，会根据屏幕宽度自动设置表单样式。
给元素添加data-role = "none"属性，避免jQuery Mobile自动为其添加样式。
<form method="post" action="demoform.asp"> <div data-role="fieldcontain"> <label for="fname">姓名：</label> <input type="text" data-role= "none" name="fname" id="fname"> <input type="submit" data-inline="true" value="提交"> </div> </form> <form method="post" action="demoform.asp"> <label for="fname" class="ui-hidden-accessible">姓名</label> <input type="text" name="fname" id="fname" placeholder="姓名..."> <input type="submit" data-inline="true" value="提交"> </form>
jQuery Mobile 提交表单，会自动使用ajax提交表单。
2 输入
使用标准的html元素，也可以使用html5的元素。type可以为text、date、email、radio、search、checkbox等等。 <textarea> 用来输入多行文本。
placeholder属性为输入提示。
单选 和 复选 按钮组可以使用<fieldset data-role='controlgroup' data-type='horizontal'>标签来组合这些选项。 data-type='horizontal' 属性可以让按钮水平显示。
<legend> 属性用来定义标题。
<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
<label for="fullname">全名：</label>
<input type="text" name="fullname" id="fullname">
<label for="bday">生日：</label>
<input type="date" name="bday" id="bday">
<label for="email">电邮：</label>
<input type="email" name="email" id="email" placeholder="您的邮件地址..">
<label for="info">Additional Information:</label>
<textarea name="addinfo" id="info" ></textarea>
<label for="search">Search:</label>
<input type="search" name="search" id="search">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Choose your gender:</legend>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male" checked>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>
<legend>Choose as many favorite colors as you'd like:</legend>
<label for="red">Red</label>
<input type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input type="checkbox" name="favcolor" id="blue" value="blue">
</div>
</form>
3 选择（select）
<optgroup>标签用来分组。
data-native-menu = 'false' 可以使所有平台上的样式显示一样。
multiple 让select改为多选。
<div data-role="fieldcontain"> 可以组合多个选择菜单。
<fieldset> 标签添加data-type='horizontal' 使多个水平显示。
<fieldset> 标签添加data-role="collapsible" 可创建可折叠表单。
<form method="post" action="demoform.asp">
<div data-role='fieldcontain'>
<fieldset data-role="fieldcontain">
<label for="day">选择天</label>
<select name="day" id="day" data-native-menu="false" multiple>
<optgroup label="工作日">
<option value="mon">星期一</option>
<option value="tue">星期二</option>
<option value="wed">星期三</option>
<option value="thu">星期四</option>
<option value="fri">星期五</option>
</optgroup>
<optgroup label="周末">
<option value="sat">星期六</option>
<option value="sun">星期日</option>
</optgroup>
</select>
</fieldset>
<input type="submit" data-inline="true" value="提交">
</div>
</form>
4、滑动
数字滑动选择,data-hightlight="true"让已选择的区域高亮显示。
<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
<label for="points">Points:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100" data-hightlight="true">
</div>
</form>
切换开关, 给select添加data-role="slider"来实现。
<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
<label for="switch">Toggle Switch:</label>
<select name="switch" id="switch" data-role="slider">
<option value="on">On</option>
<option value="off" selected>Off</option>
</select>
</div>
</form>