首页 > 代码库 > 5 表单动作

5 表单动作

     jQuery Mobile框架支持标准的网页表单,在支持的设备上会自动使用AJAX处理,同时标准表单控件的外观也为触摸操作做出了优化。
        标准网页表单,指的是位于form元素内的一组表单控件。默认的情况下,jQuery Mobile会使用AJAX方式过渡到目标页面。使用data-ajax=“false”属性,可以禁止使用Ajax。也可以使用target=“_blank”来牵制使用非ajax方式提交。
    表单元素
     jQuery Mobile允许在一个表单中同时使用标准网页表单控件和新的富控件。框架中有一个“自动初始化”(auto-initialization)的特性,可将网页表单控件替换为对触摸操作更为友好的富控件。禁止的话,只需在元素上加data-role=“none”属性。大部分控件都要有一个label元素对应。
  • 域容器:
    域容器是一个可选的文本标签、部件包装器,容器可以是任意带data-role=“fieldcontainer”的块级元素。            
    容器会自动对齐元素和添加分割符;容器会自动调整布局。
  • 文本输入框:
     <input type="text">
    <input type="password">
    <input type="email">
    <input type="url">
    <input type="search">
    <input type="number">
    <textarea>
    使用上面的元素不需要显示指定任何data-role属性。jQuery Mobile会自动渲染。遇到不认识的type属性时,浏览器会将它降级显示。即使没有显示地指定data-role,控件还是被渲染为jQuery Mobile控件的。
  • 自增长文本区:
    textarea。    
  • 新HTML5属性:
    required、pattern、placeholder以及min和max。    
  • 日期输入框:
    date用于日期选择(年、月、日);
    datetime用于完整的日期选择(年、月、日、小时、分钟),使用标准的包括GMT时区的语法;
    time用于时间选择(小时、分钟);
    datetime-local用于完整的日期选择,不带时区信息;
    month用于月份选择(一般渲染为一个下拉列表);
    week用于选择指定年份的星期(一般渲染为一个下拉列表);
  • 滑块:
    滑块用于输入处于某个范围的数字值。
    <input type="range" > ,接受min、max以及step值。data-theme定义色样,只对数字输入框有效。data-track-theme属性,只影响滑动条。
  • 平移切换开关:
    平移切换开关是一个布尔值(true或false,on或off)选择器。需要使用data-role的表单控件,值为slider。需要使用select元素,并包含两个option作为子元素。
  • 选择菜单
    select元素。加multiple布尔属性后,将提供另一种用于多选的用户界面。
    可以使用optgroup元素将option元素分组。
    使用data-native-menu="false",原来的菜单将会被一个类似对话框的交互列表取代。用data-overlay-theme可以指定这个覆盖层的样式,如果某个option元素显示地指定空值(value=http://www.mamicode.com/“”),或带有属性data-placeholder=“true”,则它将被用作覆盖层的标题。使用布尔属性multiple,该覆盖层对话框将带一个关闭按钮,并不会在选择一项后自动关闭。
  • 控件组合
    controlgroup元素可控制控件的水平或垂直显示。使用controlgroup元素时,单独的文本标签(label)会被隐藏。可以使用legend元素来定义一个应用到整个分组的文本标签。
  • 单选按钮
    工作条件是:type=“radio”;name相同;关联一个label元素。
    最好将radio包含在controlgroup容器中,界面会友好点,当controlgroup元素的type改为horizontal,则会变成开关按钮控件。
  • 复选框
    复选框和单选按钮的工作方式类似。水平时数量最好少于五个。
  • 上传文件
    一些新的设备上,开始支持html媒体捕获api,允许我们通过一个文件上传表单域请求摄像头图片、视频或音频。可在http://mobilehtml5.org查看这个Html5 Api的兼容情况。    

5 表单动作