原文地址:HTML5′s “email” and “url” Input Types

原文日期: 2010年09月15日

翻译日期: 2013年08月13日





在前面的博文,我们已经讨论了一些HTML5改进的地方,比如placeholder,prefetching以及webStorage,下面我要介绍的是两个新的input元素类型: email和url。让我们跟着代码来看看他们的好处:

语法格式:

新的input type属性,将使用 email 或者 url 来替代text:

<!-- email, 非@ + @ + 非 @ 符号,也可以使用其他的啦,
	比如 [a-zA-Z0-9]{3,30}@[a-zA-Z0-9]+\w*\.(com|cn|org|net) -->
<input type="email" pattern="[^@]*@[^@]*" value="">

<!-- url -->
<input type="url" value="">

使用HTML5所特有的pattern属性域,你可以提供一个正则表达式来验证email和url地址的格式,我们将在另一篇文章讨论这个话题。



优点

- 可以定制特殊的css样式,input[type=email]

- 可以定制特殊的css样式,input[type=url]

- 可以做更多的语义定义

- 移动应用适配性:移动浏览器将会为email和url弹出特殊的键盘,不用用户手动切换





最初我很反感添加多余的input type,但深入思考后我觉得对于提高用户体验是一个很好的举措,你认为呢?

HTML5 input 类型: email及url的更多相关文章

  1. 使用 HTML5 input 类型提升移动端输入体验

    在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...

  2. 使用 HTML5 input 类型提升移动端输入体验(键盘)

    在最近的项目中,策划老是要求我们弹出各种类型的键盘,特别是在iOS下,例如输入帐号的时候,不应该支持输入中文,该输入纯数字的时候就应该谈数字键盘等.个人觉得这些都是我们平时开发很少意识到的,虽然有些刁 ...

  3. 使用 HTML5 input 类型提升移动端输入体验(转翻译)

    在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...

  4. HTML5 Input 类型

    浏览器支持 Input type IE Firefox Opera Chrome Safari email No 4.0 9.0 10.0 No url No 4.0 9.0 10.0 No numb ...

  5. HTML/HTML5 Input类型&&表单

    1.HTML 中"不常用"input类型中的属性值: disabled:输入字段禁用: maxlength:输入字段的最大字符长度: readonly:输入字符只读,无法修改: s ...

  6. 使用MUI的日期控件引起的探索——HTML5 input类型date属性

    我写移动端的页面会用到MUI这个框架,个人觉得挺好用的,有很多实用的UI组件.当然坑还是有的,http://dev.dcloud.net.cn/mui/ui/ MUI官网,有兴趣的小伙伴可以看看 虽然 ...

  7. Html5学习3(拖放、Video(视频)、Input类型(color、datetime、email、month 、number 、range 、search、Tel、time、url、week ))

    1.Html拖放 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> < ...

  8. HTML5 学习08——Input 类型、表单元素及属性

    注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. (1)Input 类型: color color 类型: ...

  9. Html5学习进阶三 Input 类型

    HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url number range Date ...

随机推荐

  1. log4j不生成日志文件的问题

    直接看我的注解吧 注意地址的斜杠,还有地址别写什么相对地址了,这包太老了,服务器update一下兼容问题就出来了. #第一个参数定义达到什么程度就输出 第二第三....第N 定义输出的类型 #debu ...

  2. ExecutorService

    接口 java.util.concurrent.ExecutorService 表述了异步执行的机制,并且可以让任务在后台执行.壹個 ExecutorService 实例因此特别像壹個线程池.事实上, ...

  3. Head First Java设计模式思维导图总结

    关于Head First Java设计模式的思维导图总结:

  4. 利用Express和ejs编写简单页面

    1.创建临时文件夹ejsdemo $ mkdir ejsdemo 2.进入ejsdemo 初始化项目 $ npm init 3.安装express $ npm install express --sa ...

  5. C# TextBox 焦点

    TextBox焦点问题 1.失焦 KeyBoard.ClearFocus(); 存在一个问题,失去焦点之后,中文通过输入法依旧是可以输入的. 如果是中文文本框,按Enter失焦,同时禁止输入中文,可以 ...

  6. 首届.NET Core开源峰会

    首届.NET Core开源峰会 代号:dnc 2018 亮点:去中心化.社区驱动 开源峰会 时间:2018年5月20日 周日 地点:在线峰会.远程参与 形式:每个主题5分钟-15分钟闪电演讲 演讲方式 ...

  7. android 欢迎界面的制作

    再打开手机app的时候,最先映入我们眼帘的是一个覆盖手机全屏的欢迎界面,在这个界面显示出来的时候整个手机屏幕只会显示这一个界面,上面的标题栏,以及手机最顶端的状态栏都会消失,只有欢迎页面结束跳转到其他 ...

  8. CentOS7 YUM 安装NGINX

    1.先添加源: nano /etc/yum.repos.d/nginx.repo 把下边这段代码添加到nginx.repo中去.[nginx] name=nginx repo baseurl=http ...

  9. GDAL C#中文路径,中文属性名称乱码问题

    昨天写的博客,将C#读取shp中文属性值乱码的问题应该可以解决,博客地址为:http://blog.csdn.net/liminlu0314/article/details/54096119,然后又测 ...

  10. Android中典型的ROOT原理(5)

    ROOT的作用 Customization 用户的个人定制,如删除一些预安装,定制开机动画等. 特权操作 所有需要特权操作的基本都是要通过ROOT,这也是ROOT的初衷. ROOT的第一步:寻找漏洞并 ...