JQueryMobile入门3-Form表单

当在jqm框架中实现表单提交时，一般会使用ajax异步提交处理，并在表单页和结果页之间创建一个平滑的过渡效果。
为确保表单正常提交，建议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>

Paste_Image.png

上例中当type为search类型时，自动在文本框前加放大镜图像

• slider类型

jqm允许添加一个range类型的范围选择型控件，该类型可通过value、min、max等属性来定义可选择范围及初始默认值

    <label for="slider">分数</label>
    <input type="range" name="slider" id="slider" value="20" min="0" max="100" />

Paste_Image.png

• select 元素结合slider类型实现开关功能效果的toggle switches组件
  <label for="slider">切换</label>
  <select name="slider" id="slider" data-role="slider" />
  <option value="off">关闭</option>
  <option value="on">开启</option>
  </select>

Paste_Image.png Paste_Image.png

• 单选按钮
  创建单选按钮步骤：
  • 为input元素定义type类型为radio，把label元素的for属性设置为input元素的id属性一样；
  • 按键组中label元素用于显示选项的文本内容；推荐把一组单选按钮元素放在fieldset元素内，同事定义legend元素表示单选按钮组的名称；

  • 设置fieldset元素的data-role为controlgroup，表示钙元素内饰一组单选按钮。
    <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里设置data-type属性值为horizontal 水平排列单选按钮

Paste_Image.png

• 复选框类型

jqm中单选和复选框在语法方面是相同的，唯一不同的是input元素的属性是checkbox；

Paste_Image.png

• 下拉选择菜单
  创建下拉菜单的步骤：

  • 定义select元素以及option元素列表，设置label元素的for属性为select元素的id属性

  • 定义label元素的文本内容作为选项的名称

  • 定义div元素并设置data-role属性为fieldcontain，并把select元素、label元素嵌套在该div内。

            <div data-role="fieldcontain">
                <label for="level">最高学历：</label>
                <select name="level" id="level">
                    <option value="0">小学毕业</option>
                    <option value="1">初中毕业</option>
                    <option value="2">高中毕业</option>
                    <option value="3">大学专科</option>
                    <option value="4">大学本科</option>
                    <option value="5">硕士及以上</option>
                </select>   
            </div>
    

Paste_Image.png

• 数据项分组的选择菜单
  在select元素中指定optgroup元素并设置其label属性，jqm会创建一个分割符的分组标题，label属性就是该分割符的标题文本。
  <div data-role="fieldcontain">
  <label for="level">最高学历：</label>
  <select name="level" id="level">
  <optgroup label="分组1"></optgroup>
  <option value="0">小学毕业</option>
  <option value="1">初中毕业</option>
  <option value="2">高中毕业</option>
  <optgroup label="分组2"></optgroup>
  <option value="3">大学专科</option>
  <option value="4">大学本科</option>
  <option value="5">硕士及以上</option>
  </select>
  </div>

Paste_Image.png

• 禁用option的某个选项：disabled
  <option value="1" disabled>初中毕业</option>
• 允许多选的菜单选项：multiple
  <select name="level" id="level" multiple>

Paste_Image.png

• <select name="level" id="level" data-native-menu="false" multiple>

data-native-menu="false" 表示采用jqm自定义的选择窗口，默认是true使用平台内置选择器，为false时，选择窗口左上方会有关闭按钮

Paste_Image.png

• option占位符
  <div data-role="fieldcontain">
  <label for="level" class="select">最高学历：</label>
  <select name="level" id="level" data-native-menu="false">
  <option value="" data-placeholder="true">请选择</option>
  <option value="0">小学毕业</option>
  <option value="1">初中毕业</option>
  <option value="2">高中毕业</option>
  <option value="3">大学专科</option>
  <option value="4">大学本科</option>
  <option value="5">硕士及以上</option>
  </select>
  </div>

Paste_Image.png

• 更多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>

Paste_Image.png