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

5 表单动作

2024-08-07 00:45:46   219人阅读

     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 表单动作


联系
我们