• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > input元素的url类型和email类型简介_html5教程技巧

input元素的url类型和email类型简介_html5教程技巧

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含input元素,url类型,email类型等相关知识,匿名希望在学习及工作中可以帮助到您
在过去我们制作网页输入框,会用到不少JS验证,如今有了HTML5写这种效果已经没有那么麻烦了,下面我来给大家介绍两种HTML5的input的新增加的类型应用。
1、URL类型:




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

运行效果如下图:

2、Email类型:




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

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

您可能想查找下面的文章:

  • input元素的url类型和email类型简介
  • input元素的url类型和email类型简介_html5教程技巧

相关文章

  • 2018-12-03H5页面音视频自动播放
  • 2018-12-03这个canvas做出来的交互效果具体是怎么实现的?有什么工具有助于做这类开发吗?
  • 2018-12-03 html5视频与声频详解
  • 2018-12-03HTML5 Canvas 起步(1) - 基本概念_html5教程技巧
  • 2018-12-03详细介绍HTML5 canvas基本绘图之绘制线段代码实例
  • 2018-12-03仿CSDN Blog返回页面顶部功能实现原理及代码_html5教程技巧
  • 2018-12-03用html5的canvas画布绘制贝塞尔曲线完整代码_html5教程技巧
  • 2018-12-03HTML5新增元素、标签总结
  • 2018-12-03html5 command标签的用法和<command>标签的使用案例详解
  • 2018-12-03突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述_html5教程技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5中Canvas屏保动画的实现代码
    • 使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
    • 分享DOM中的表单操作,节点操作
    • HTML5 canvas画图并保存成图片的jcanvas插件_html5教程技巧
    • Html5 Canvas初探学习笔记(15) -鼠标事件
    • HTML5使用Audio标签实现歌词同步的效果
    • html5贪吃蛇游戏使用63行代码完美实现_html5教程技巧
    • H5新属性audio音频和video视频的控制详解(推荐)
    • 关于html5中的localstorage详细介绍(图)
    • [HTML5游戏开发]挑战横版ACT(三):遇红颜英雄亦多情

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有