Jquery Mobile表单

Posted 2020-07-26 tuna

三个前提：

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 进行表单提交