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 相关文章推荐
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
小程序实现录音功能
2020/09/22 Javascript
对python中大文件的导入与导出方法详解
2018/12/28 Python
python判断自身是否正在运行的方法
2019/08/08 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Python实现微信好友的数据分析
2019/12/16 Python
Python类如何定义私有变量
2020/02/03 Python
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
什么是TCP/IP
2014/07/27 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
出资证明书范本(标准版)
2014/09/24 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python