Jquery Mobile表单

时间:2022-11-13 03:12:42

三个前提:

1、每个form必须设置method和action属性

2、每个form必须有页面范围内唯一的id标识

3、每个form必须有一个label标签,通过设置它的for属性来匹配元素的id

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

1、隐藏label内容:

<form method="post" action="demoform.asp">
<label for="fname" class="ui-hidden-accessible">姓名:</label>
<input type="text" name="fname" id="fname" placeholder="姓名...">
</form>

2、域容器:

如果需要 label 和表单元素在宽屏幕上显示正常,用带有 data-role="fieldcontain" 属性的 <div> 或<fieldset>包装 label 或表单元素:

<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
<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>

fieldcontain 属性基于页面宽度来设置 label 和表单控件的样式。当页面宽度大于 480px 时,它会自动将 label 与表单控件放置于同一行。当小于 480px 时,label 会被放置于表单元素之上。

3、单选按钮:

<form method="post" action="demoform.asp">
<div data-role="controlgroup">
<legend>Choose your gender:</legend>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
</div>
</form>
<!-- 需要添加label和id -->

4、表单选择:

<!-- 分组 -->
<select name="day" id="day">
<optgroup label="Weekdays">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
</optgroup>
<optgroup label="Weekends">
<option value="sat">Saturday</option>
<option value="sun">Sunday</option>
</optgroup>
</select>
<!-- 多选 -->
<select name="day" id="day" multiple data-native-menu="false">

5、滑块:

<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
<label for="points">Points:</label>
<input type="range" data-highlight="true" name="points" id="points" value="50" min="0" max="100">
</div>
</form>

6、切换开关:

<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" selected>On</option>
<option value="off">Off</option>

</select>
</div>
</form>
tips:清除JQM自动样式:data-role:none

      jQuery Mobile 会自动通过 AJAX 进行表单提交