HTML5 input元素类型:email及url介绍


Posted in HTML / CSS onAugust 13, 2013

在前面的博文,我们已经讨论了一些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,但深入思考后我觉得对于提高用户体验是一个很好的举措,你认为呢?

HTML / CSS 相关文章推荐
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 #HTML / CSS
HTML5的语法变化介绍
Aug 13 #HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 #HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 #HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 #HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 #HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 #HTML / CSS
You might like
php foreach 参数强制类型转换的问题
2010/12/10 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现的一个p2p文件传输实例
2014/06/04 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
python处理“
2019/06/10 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python向图片里添加文字
2019/11/26 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
如何教少儿学习Python编程
2020/07/10 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
附答案的Java面试题
2012/11/19 面试题
毕业生精彩的自我评价分享
2013/10/06 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
导游词之介休绵山
2019/12/31 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis