移动端使用HTML5表单增强体验

时间:2022-01-23 21:44:05

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

移动端使用HTML5表单增强体验

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

如:Email:

移动端使用HTML5表单增强体验

有没有看到,下面多了一个@符号;

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

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

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

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

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

  2. HTML5表单增强

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

  3. &lbrack;H5表单&rsqb;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. docker 学习过程

    参考: http://git.oschina.net/search?search=csphere&type=project&language=&page=2&condi ...

  2. IntelliJ IDEA设置JVM运行参数

    2015十一月 28 原 IntelliJ IDEA设置JVM运行参数 分类:JavaSE (11566) (1) 打开 IDEA 安装目录,看到有一个 bin 目录,其中有两个 vmoptions ...

  3. 向上取整Ceil,向下取整Floor,四舍五入Round

    几个数值函数的功能实现: (1)int Ceil(float f) int Ceil(float f) { int integer = (int)f; if (f > (float)intege ...

  4. 面试题-Java基础-集合和数组

    1.Java集合类框架的基本接口有哪些? 集合类接口指定了一组叫做元素的对象.集合类接口的每一种具体的实现类都可以选择以它自己的方式对元素进行保存和排序.有的集合类允许重复的键,有些不允许.Java集 ...

  5. 【环套树&plus;树形dp】Bzoj1040 &lbrack;ZJOI2008&rsqb; 骑士

    Description Z国的骑士团是一个很有*的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬.最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略战争.战火 ...

  6. react 常见api 使用(长期更新)

    1.父子通信 1.1 父-子 props 父组件: class myPage extends React.Component { render() { return ( <div> {/* ...

  7. 04 uni-app框架学习:禁用顶部原生导航栏

    1.在pages.json中配置 比如要首页禁用 就在首页这个选项里 加上这几句代码 2.效果如下

  8. okhttp3带cookie请求

    Request经常都要携带Cookie,上面说过request创建时可以通过header设置参数,Cookie也是参数之一.就像下面这样: Request request = new Request. ...

  9. 【LeetCode】50&period; Pow&lpar;x&comma; n&rpar; &lpar;3 solutions&rpar;

    Pow(x, n) Implement pow(x, n). 按照定义做的O(n)肯定是TLE的. 利用这个信息:x2n = (xn)2 有个注意点,当n为负是,直接取反是不可行的. 由于int的表示 ...

  10. Java实现的词频统计——功能改进

    本次改进是在原有功能需求及代码基础上额外做的修改,保证了原有的基础需求之外添加了新需求的功能. 功能: 1. 小文件输入——从控制台由用户输入到文件中,再对文件进行统计: 2.支持命令行输入英文作品的 ...