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字体效果的设置方法小结
Jun 13 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 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
如何用php获取程序执行的时间
2013/06/09 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
js验证表单第二部分
2006/11/25 Javascript
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
axios学习教程全攻略
2017/03/26 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
python中的函数用法入门教程
2014/09/02 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
外贸业务员求职信范文
2013/12/12 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
学习礼仪心得体会
2014/09/01 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
毕业设计论文评语
2014/12/31 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
使用python求解迷宫问题的三种实现方法
2022/03/17 Python