Jquery Mobile表单

Posted tuna

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery Mobile表单相关的知识,希望对你有一定的参考价值。

三个前提:

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

 

以上是关于Jquery Mobile表单的主要内容,如果未能解决你的问题,请参考以下文章

将值(设置)从 jQuery Mobile 1.4 表单中取出并返回到 jQuery Mobile 1.4 表单中。怎么做?

在 jQuery mobile 中未选择选项卡时禁用表单输入

jQuery Mobile-jquery Mobile 怎么用ajax提交表单

jQuery Mobile-jquery Mobile 怎么用ajax提交表单

jQuery Mobile 表单

jQuery Mobile 表单