1、URL类型:

  1. <form>
  2. <input name="urls" type="url" value="http://www.w3cfuns.com/"/>
  3. <input type="submit" value="提交"/>
  4. </form>

复制代码

设置此类型后,从外观上来看与普通的元素差不多,可是如果你将此类型放到表单中之后,当点击提交按钮,如果此输入框中输入的不是一个URL地址,将无法提交。

运行效果如下图:

<ignore_js_op>

2、Email类型:

  1. <form>
  2. <input name="urls" type="email" value="http://www.w3cfuns.com/"/>
  3. <input type="submit" value="提交"/>
  4. </form>

复制代码

如果我们讲上面的URL类型的代码中的type修改为email,那么在表单提交的时候,会自动验证此输入框中的内容是否为email格式,如果不是,则无法提交。

运行效果如下图:

<ignore_js_op>

HTML5每日一练之input新增加的URL类型与email类型应用的更多相关文章

  1. HTML5每日一练之input新增加的六种时间类型应用

    今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的. 注意:此种类型的input在Opera10+中效果为佳,Chr ...

  2. HTML5每日一练之input新增加的5种其他类型1种标签应用

    今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color 注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好 ...

  3. HTML5每日一练之figure新标签的应用

    igure元素是一种元素的组合,可带有标题(可选).figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响.figure所表示的内容可以是图片.统计图或代码示例 ...

  4. HTML5每日一练之details展开收缩标签的应用

    details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...

  5. HTML5每日一练之progress标签的应用

    progress标签:从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条.在HTML5中我们终于可以不用模拟了. <progress id="W3Cfuns_pr ...

  6. HTML5每日一练之OL列表的改良

    在HTML5中的OL被改良了,为它增加了两个新属性. start属性:start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推 <ol start=&qu ...

  7. HTML5每日一练之视频标签的应用

    与音频一样,在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视 ...

  8. [html5] 学习笔记-改良的input元素种类

    在html5中,大幅度增加与改良了input元素的种类,可以简单的使用这些元素来实现之前需要JS脚本来实现的功能. 1.url类型.email类型.date类型.time类型.datetime类型.d ...

  9. html5 javascript 新增加的高级选择器更精准更实用

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

随机推荐

  1. HDU 3038 How Many Answers Are Wrong 并查集带权路径压缩

    思路跟 LA 6187 完全一样. 我是乍一看没反应过来这是个并查集,知道之后就好做了. d[i]代表节点 i 到根节点的距离,即每次的sum. #include <cstdio> #in ...

  2. web前端性能测试小点

    关于前端性能的文章: http://www.cnblogs.com/fnng/archive/2011/09/19/2181894.html web应用的前端性能响应时间指浏览器的页面加载时间.浏览器 ...

  3. C#中Dictionary的用法及用途

    Dictionary<string, string>是一个泛型 他本身有集合的功能有时候可以把它看成数组 他的结构是这样的:Dictionary<[key], [value]> ...

  4. 1137. Bus Routes(dfs)

    1137 做过一样的 怎么又忘了 再一次搜超时 不用回溯 #include <iostream> #include<cstdio> #include<cstring> ...

  5. android中给TextView或者Button的文字添加阴影效果

    1在代码中添加文字阴影 TextView 有一个方法 /**      * Gives the text a shadow of the specified radius and color, the ...

  6. Flexigrid自定义显示数据列

    近期在搞ExtJs,发现ExJs的Grid相当的强大,后来又搞Jquery时,就对原来的表格不怎么满意了,于是,花了点时间,从网上找了个Grid插件,这个插件功能是比较强大,什么行排序.筛选.分页都有 ...

  7. UVa 1635 (唯一分解定理) Irrelevant Elements

    经过紫书的分析,已经将问题转化为求组合数C(n-1, 0)~C(n-1, n-1)中能够被m整除的个数,并输出编号(这n个数的编号从1开始) 首先将m分解质因数,然后记录下每个质因子对应的指数. 由组 ...

  8. RESTful API 设计最佳实践(转)

    背景 目前互联网上充斥着大量的关于RESTful API(为方便,下文中“RESTful API ”简写为“API”)如何设计的文章,然而却没有一个”万能“的设计标准:如何鉴权?API 格式如何?你的 ...

  9. Java [Leetcode 101]Symmetric Tree

    题目描述: Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). ...

  10. eclipse集承jboss服务器

    eclipse Kepler + Jboss7.1 参考引用文档: http://www.tekdigest.com/how-to-install-jboss-tools-in-eclipse.htm ...