我们知道，HTML5新增了许多表单类型，如： number，email，url，tel，datetime，month，datetime-local等等，像datetime,month这些非常方便，免得自己去写选择日期，时间插件；但是像number，tel，email，这些在桌面端变化不是特别大，外观跟text一样，但是在移动端有点不同，大部分移动设备都是使用虚拟键盘，当我们使不同类型表单时，它会切换到相应的输入模式，如：number

输入法直接切换数字模式；

如：Email：

有没有看到，下面多了一个@符号；

这个变化在移动端非常方便，免得我们去切换模式；

在做开发的时候，尽量使用相应的表单类型，在桌面端或许变化不是很大，但是在移动端体验就非常棒，现在有个概念就是“移动优化”；

移动端使用HTML5表单增强体验的更多相关文章

  1. Dynamics CRM2015 Update1 新功能之表单增强功能

    CRM2015 Update 1发布后,系统的界面的变化很大,仔细观察后会发现表单窗体也有些不同了,在CRM2015 Update1的官方介绍中对此变化的解释是起用了新的窗体呈现引擎,让界面更好看加载 ...

  2. HTML5表单增强

    感觉最大的改变就是表单元素可以不写在form标签中.写在其他地方,加个form属性就能提交了别的嘛感觉没什么,表单验证也不能提示信息,感觉不实用 <!DOCTYPE html> <h ...

  3. [H5表单]html5自带表单验证体验优化及提示气泡修改

    慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...

  4. html5表单验证

    表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html ...

  5. jQuery 浮动标签插件，帮助你提升表单用户体验

    浮动标签模式(Float Label Pattern)是最新流行的一种表单输入域的内容提示方式,当用户在输入框输入内容的时候,原先占位符的内容向上移动,显示在输入的内容的上面.这里推荐的这款 jQue ...

  6. html5 app开发重大消息-腾讯在技术端推进Html5生态发展

    中新网5月3日电 日前,腾讯正式发布腾讯浏览服务(Tencent Browser Service,以下简称TBS),宣布为合作伙伴提供整合腾讯底层技术.内容框架.广告体系以及大数据等多方面能力的升级浏 ...

  7. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  8. HTML5表单及其验证

    随笔- 15 文章- 1 评论- 115 HTML5表单及其验证   HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...

  9. HTML5 表单元素和属性

    HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...

随机推荐

  1. RESTful API设计指南

    网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......). 因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信.这导致AP ...

  2. 重装Windows系统后，Linux系统启动引导失败

    说明:我的电脑是在装了Windows系统后,装的Linux系统,所以启动引导是Linux干的活.可是,今天重装了Windows系统,启动引导就换成了Windows的,Windows的启动引导把Linu ...

  3. html中的图片直接使用字符串代替

    最近来了一个网页,里面有图片,但是却没有引用外部的图片资源,很好奇.查看代码后发现,里面的图片是使用base64编码后的字符串代替了,这个叫做Data URI scheme. Data URI sch ...

  4. PHP基础（一）

    <?php $expression = false; if($expression == true): ?> <p>This will show if the expressi ...

  5. iOS10之后openURL:方法过期之后的替代方法及使用

    目前苹果为iOS10开放了一个key:UIApplicationOpenURLOptionUniversalLinksOnly但亲测无效 目前使用的是这个key:UIApplicationOpenUR ...

  6. spark spark ziliao important

    http://book.51cto.com/art/201408/448416.htm 一.如何实现多台机器的ssh无密码登录 当我们在配置多台计算,使之可以相互使用无密码登录-ssh,之前都是一台一 ...

  7. nload 实时网速查看

    nload eth0 -u K Device eth0 [192.168.0.33] (1/1):=================================================== ...

  8. Android 组件系列-----Activity保存状态

    本篇随笔将详细的讲解Activity保存状态的概念,也就是saving activity state. 一.Activity状态保持概念 保存Activity的状态是非常重要的,例如我们在玩一个游戏的 ...

  9. 谢谢博客-园，让我不再有开源AYUI的想法

    第一次 第二次 教程不会在博客园上写了,具体的看我官网博客吧,谢谢大家了 ================= 我是个有素质的程序员 艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹艹 ...

  10. Android--使用Canvas绘图

    前言 除了使用已有的图片之外,Android应用常常需要在运行时根据场景动态生成2D图片,比如手机游戏,这就需要借助于Android2D绘图的支持.本篇博客主要讲解一下Android下使用Canvas ...