input元素的url类型和email类型简介


Posted in HTML / CSS onJuly 11, 2012

在过去我们制作网页输入框,会用到不少JS验证,如今有了HTML5写这种效果已经没有那么麻烦了,下面我来给大家介绍两种HTML5的input的新增加的类型应用。
1、URL类型:
<form>
        <input name="urls" type="url" value="https://3water.com/"/>
        <input type="submit" value="提交"/>
</form>
设置此类型后,从外观上来看与普通的元素差不多,可是如果你将此类型放到表单中之后,当点击提交按钮,如果此输入框中输入的不是一个URL地址,将无法提交。

运行效果如下图:
input元素的url类型和email类型简介
2、Email类型:
<form>
        <input name="email" type="email" value="https://3water.com/"/>
        <input type="submit" value="提交"/>
</form>
如果我们讲上面的URL类型的代码中的type修改为email,那么在表单提交的时候,会自动验证此输入框中的内容是否为email格式,如果不是,则无法提交。

如果你有不懂的,可以也可以直接给三水点靠木留言,我会尽快回复大家的。
如果看懂这个以后,大家可以自己练习一下,把练习发上来,帮助大家一起进步!

HTML / CSS 相关文章推荐
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
Nov 05 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 #HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 #HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 #HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 #HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 #HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 #HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 #HTML / CSS
You might like
关于js和php对url编码的处理方法
2014/03/04 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
javascript实现表单验证
2016/01/29 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
vue实现放大镜效果
2020/09/17 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
Python元组及文件核心对象类型详解
2018/02/11 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
python实现最小二乘法线性拟合
2019/07/19 Python
Python requests模块session代码实例
2020/04/14 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
护士自荐信怎么写
2013/10/18 职场文书
《灯光》教学反思
2014/02/08 职场文书
党员志愿者活动总结
2014/06/26 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
加薪申请报告范本
2015/05/15 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏