HTML5 HTML5之input新增加的URL类型与email类型应用

[复制链接]
建站高手 发表于 2015-9-8 14:10:10 [HTML5] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
在过去我们制作此种类型输入框,会用到不少JS验证,如今,有了HTML5写这种效果已经没有那么麻烦了,下面我来给大家介绍两种HTML5的input的新增加的类型应用。

1、URL类型:
  1. <form>
  2.         <input name="urls" type="url" value="http://www.zb7.com/"/>
  3.         <input type="submit" value="提交"/>
  4. </form>
复制代码

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

URL类型

URL类型


2、Email类型:
  1. <form>
  2.         <input name="urls" type="email" value="http://www.zb7.com/"/>
  3.         <input type="submit" value="提交"/>
  4. </form>
复制代码


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

运行效果如下图:

Email类型

Email类型







上一篇:HTML5之Form新属性的使用
下一篇:HTML5之input新增加的时间类型应用

大神点评7

豪你个头 发表于 2015-9-22 16:26:25 [HTML5] 显示全部楼层
谢谢分享
豪你个头 发表于 2015-9-22 16:27:08 [HTML5] 显示全部楼层
谢谢分享
wk199 发表于 2016-8-13 17:54:53 [HTML5] 显示全部楼层
感谢楼主无私的分享与奉献
www.809suncity.com
wenwentony 发表于 2016-9-20 14:57:09 [HTML5] 显示全部楼层
这个不错,赞!
风潇 发表于 2016-10-31 16:54:34 [HTML5] 显示全部楼层
谢谢,学习了
xjhw 发表于 2017-4-22 12:30:51 [HTML5] 显示全部楼层

强烈支持,站帮网有你更精彩
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

建站高手

精英站长

  • 3489 积分
  • 998 帖数
  • 0 日志
广告招商 QQ: 5620010
快速回复 返回顶部 返回列表