JQueryMobile入门3-Form表单

当在jqm框架中实现表单提交时，一般会使用ajax异步提交处理，并在表单页和结果页之间创建一个平滑的过渡效果。
为确保表单正常提交，建议form元素一定要定义action和method属性，method属性允许使用get和post两种方式来提交表单。

        

            name:
            
            password:
            
            tel:
            
            搜索
            
            
        

Paste_Image.png

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

• slider类型

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

    分数
    

Paste_Image.png

• select 元素结合slider类型实现开关功能效果的toggle switches组件
  切换
  
  关闭
  开启
  

Paste_Image.png

Paste_Image.png

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

  • 设置fieldset元素的data-role为controlgroup，表示钙元素内饰一组单选按钮。
    

    
    

    请选择您的年龄范围：

    
    
    不限
    
    16-22岁
    
    23-30岁
    
    31-45岁
    
    大于45岁
    
    
    
    

    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内。

            
    
                最高学历：
                
                    小学毕业
                    初中毕业
                    高中毕业
                    大学专科
                    大学本科
                    硕士及以上
                   
            
    

Paste_Image.png

• 数据项分组的选择菜单
  在select元素中指定optgroup元素并设置其label属性，jqm会创建一个分割符的分组标题，label属性就是该分割符的标题文本。
  
  
  最高学历：
  
  
  小学毕业
  初中毕业
  高中毕业
  
  大学专科
  大学本科
  硕士及以上
  
  

Paste_Image.png

• 禁用option的某个选项：disabled
  初中毕业
• 允许多选的菜单选项：multiple
  
  

  Paste_Image.png

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

Paste_Image.png

• option占位符
  
  
  最高学历：
  
  请选择
  小学毕业
  初中毕业
  高中毕业
  大学专科
  大学本科
  硕士及以上
  
  

Paste_Image.png

• 更多data属性
  
  
  操作：
  
  请选择
  编辑用户
  删除用户
  
  

Paste_Image.png