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

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

 

时间: 2024-08-28 04:13:36

HTML5 input元素类型:email及url介绍的相关文章

HTML5新增的8类INPUT输入类型介绍

 已经有的输入类型 HTML代码示例:   代码如下: 文本域 <input type="text"> 单选按钮 <input type="radio"> 复选框 <input type="checkbox"> 下拉列表 <select><option> 密码域 <input type="password"> 提交按钮 <input type=&qu

JavaScript实现清空(重置)文件类型INPUT元素值的方法_javascript技巧

本文实例讲述了JavaScript实现清空(重置)文件类型INPUT元素值的方法.分享给大家供大家参考,具体如下: 因为安全限制,脚本是不能随意设置其value值的,所以并不能像其它表单输入域那样用属性来设置使其重置. 重置一个文件域的值,归纳起来主要有 3 种方法. 本文分析这三种方法的浏览器兼容性以及优缺点,并给出一个比较完美的综合方案的代码和Demo. 重置文件域的三种方法: 1. 设置value属性为空. 对于IE11以上和其它较新的非IE的现代浏览器Chrome/Firefox/Ope

HTML5 新增元素与属性用法介绍

在创建Web应用程序的时候,免不了会用到大量的表单元素.在HTML 5标准中, 吸纳 了Web Forms 2.0的标准,大幅度强化了针对表单元素的功能,使得关于表单的开发更快.更方便.   4.1 .1 新增属性 首先, 让我们看一下HTML 5中关于表单新增了哪些诱人的属性,以及现在有哪些浏览 器支持了这些属性. 1.form属性 在HTML 4中,表单内的从属元素必须书写在表单内部,但是在HTML 5 中,可以把它 们书写在页面上任何地方,然后给该元素指定一个form属性,属性值为该表单的

三天学会HTML5 ——多媒体元素的使用

目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息      多媒体是互联网中的最重要的一部分,无论访问的是哪种类型的网页,视频或音频触手可及,在之前实现这些功能对开发人员来说可能非常痛苦,必须依赖Object 标签,调用第三方软件来加载,如Flash等,如果有些设备不支持Flash,我们对此就束手无策了.但是HTML5的出现让多媒体网页开发变得异常简单,也形成了新的标准.   1

HTML5中的drag拖拽功能介绍

拖放(Drag 和 drop)是 HTML5 标准的组成部分,本文主要介绍与拖拽操作相关的对象及事件信息. 要接受元素的放下,目标元素必须监听至少3个事件: 首先是dragenter事件,用来决定是否接受"拖动的元素"被放下,如果接受放下,那么该事件就被取消,进入下一个事件 然后开始dragover事件,用来确定给用户什么样的反馈,即位于该元素之上时呈现什么样的效果,如果该事件被取消,反馈一般是一个鼠标指针, 也可以使用dropEffect属性定义,如果事件没有被取消,那么就是默认的行

HTML5 Audio标签方法和函数API介绍

 问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数API介绍 问说网 • 2014-06-19 09:53:52 • 3561 浏览 文章目录 audio常用属性 audio音乐格式的支持 audio属性 参数说明 最近想弄一个类似在线播放MP3的应用,刚开始想用flash播放器,但是已经很就没有弄flash了,用起来很老火,于是想到了HTML5的audi

php获取表单中多个同名input元素的值

 这篇文章主要介绍了php获取表单中多个同名元素值的方法 ,需要的朋友可以参考下 有时前台页面要允许动态增加/删除某项属性的多个值,比如向书架中添加书本,要可以动态增加或者删除书本.    前台页面的表单中会有多个input元素,如下:  代码如下: <form action="a.php">  <input type="text" name="books[]"/>  <input type="text&q

jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题_jquery

HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br/><br/><div>搜索</div> 想要实现的结果: 1.input框获取焦点时value为"",失去焦点时value为"默认值":-----这个很好实现: 2.当在input框中输入要搜素的内容后,点击div搜索,要求控

HTML5 语义元素

中介交易 SEO诊断 淘宝客 云主机 技术大厅 HTML5 语义元素 语义= 意义. 语义元素 = 元素的意义. 什么是语义元素? 一个语义元素能够为浏览器和开发者清楚的描述其意义. 而像 < div > 和 元素是属于无语义元素. 语义元素实例: < form >, < t able>, and < img > - 清楚的描述了元素所代表的内容. 浏览器对语义元素的支持 Internet Explorer 9+, Firefox, Chrome, Safa