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 相关文章推荐
你应该知道的30个css选择器
Mar 19 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 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实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
使用Apache的rewrite
2021/03/09 Servers
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
OpenCV实现人脸识别
2017/04/07 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
python与idea的集成的实现
2020/11/20 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
建筑系毕业生自我鉴定
2014/01/24 职场文书
大学社团活动策划书
2014/01/26 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
青年文明号创建承诺
2014/03/31 职场文书
进口业务员岗位职责
2014/04/06 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
党员自我评价2015
2015/03/03 职场文书
设置IIS Express并发数
2022/07/07 Servers