之前我们判断用户提交的是否是Email 的时候，往往使用js 进行判断，但在html5中可以有新的方式进行判断而且更简单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Email-Validator</title>

</head>

<body>

<form action="#">

    <input type="email"name="email" id="email">

    <button type="submit">submit</button>

    </form>

</body>

</html>

大家看效果

这是我们输入的不正确的电子邮件地址

他会自动进行向你提示

此外在input 的后面添加required就可以禁止填入的值为空了

<input required type="email"name="email" id="email">

效果如下：

html 5中的新特性之强化表单元素及属性的更多相关文章

  1. HTML5初步——新的表单元素和属性

    HTML5初步--新的表单元素和属性 HTML5初步--新的表单元素和属性 <!DOCTYPE html> <html> <head> <meta chars ...

  2. javascript总结39:DOM 中常用的表单元素的属性

    1 常用操作元素: value 用于大部分表单元素的内容获取(option除外) type 可以获取input标签的类型(输入框或复选框等) disabled 禁用属性 checked 复选框选中属性 ...

  3. 使用示例带你提前了解 Java 9 中的新特性

    使用示例带你提前了解 Java 9 中的新特性 转载来源:https://juejin.im/post/58c5e402128fe100603cc194 英文出处:https://www.journa ...

  4. ASP.NET 5与MVC 6中的新特性

    差点忘了提一句,MVC 6中默认的渲染引擎Razor也将得到更新,以支持C# 6中的新语法.而Razor中的新特性还不只这一点. 在某些情况下,直接在Web页面中嵌入某些JSON数据的方式可能比向服务 ...

  5. Webpack 3 中的新特性

    本文简短地分享下最新发布的 Webpack 3 中的新特性,供大家参考. 1. Webpack 3 的新特性 6 月 20 日,Webpack 发布了最新的 3.0 版本,并在 Medium 发布了公 ...

  6. HTML 5中的新特性

    HTML 5中的新特性 html5新增了一些语义化更好的标签元素.首先,让我们来了解一下HTML语义化. 1.什么是HTML语义化? 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开 ...

  7. （数据科学学习手札73）盘点pandas 1.0.0中的新特性

    本文对应脚本及数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 毫无疑问pandas已经成为基于Pytho ...

  8. 1 PHP 5.3中的新特性

    1 PHP 5.3中的新特性 1.1 支持命名空间 (Namespace) 毫无疑问,命名空间是PHP5.3所带来的最重要的新特性. 在PHP5.3中,则只需要指定不同的命名空间即可,命名空间的分隔符 ...

  9. Oracle11g新特性导致空表不能导出问题

        ORACLE 11G在用EXP导出时,发现空表(没有数据或者没有用过的表)不能导出了.     查了一下资料,说是Oracle 11G中有个新特性,当表无数据时,不分配segment,以节省空 ...

随机推荐

  1. spark(1.1) mllib 源码分析(三)-朴素贝叶斯

    原创文章,转载请注明: 转载自http://www.cnblogs.com/tovin/p/4042467.html 本文主要以mllib 1.1版本为基础,分析朴素贝叶斯的基本原理与源码 一.基本原 ...

  2. IIS服务中五种身份验证的灵活运用

    微软IIS服务是一项经典的Web服务,可以为广大用户提供信息发布和资源共享功能.身份认证是保证IIS服务安全的基础机制,IIS支持以下5种 Web 身份认证方法: 一.匿名身份认证 如果启用了匿名访问 ...

  3. nginx https配置+nginx跳转到万网虚拟主机

    server { listen 443 ssl; server_name www.104dh.com 104dh.com; ssl on; ssl_certificate cert104/152678 ...

  4. 为什么要使用docker

    1. 为什么要使用Docker Docker容器虚拟化的好处 Docker项目的发起人和Docker Inc.的CTO Solomon Hykes认为,Docker在正确的地点.正确的时间顺应了正确的 ...

  5. darknet(yolov2)移植到caffe框架

    yolov2到caffe的移植主要分两个步骤:一.cfg,weights转换为prototxt,caffemodel1.下载源码:git clone https://github.com/marvis ...

  6. css3动画效果：2 简易动画

    1. transition动画:鼠标移上去  旋转放大 关键点--  :hover  \ transform: scale(*)  rotate(*deg) cards 2.关键帧动画: 位移动画 t ...

  7. 170306、wamp中的Apache开启gzip压缩提高网站的响应速度

    一个网站的响应速度决定该网站的人气和质量,所以wamp配置的服务器也需要支持giz压缩来提高网站的响应速度,如何开启wamp的gzip压缩呢,经过在网站查找资料结合自己服务器中的配置,现在将这个方法分 ...

  8. [Navicat] 常用快捷键及注意事项

    近来需要同时管理多种类型.多台server的数据库,在经历了各种查询客户端(SSMS, SQLyog, PL/SQL等)的不断切换,ip/user/pwd的反复输入的这种自虐式体验后,实在无法忍受,就 ...

  9. SQLSERVER 创建索引实现代码

    是SQL Server编排数据的内部方法.它为SQL Server提供一种方法来编排查询数据 什么是索引 拿汉语字典的目录页(索引)打比方:正如汉语字典中的汉字按页存放一样,SQL Server中的数 ...

  10. AVCaptureInput和AVCaptureOutput子类

    1.AVCaptureInput AVCaptureDeviceInput:用于从AVCaptureDevice对象捕获数据. AVCaptureScreenInput:从macOS屏幕上录制的一种捕 ...