之前我们判断用户提交的是否是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. bzoj 1415(概率dp和bfs预处理)

    感觉挺经典的一道题目. 先用 bfs 预处理下一步走到的位置.因为每一步走法都是固定的,所以可以用dp的方法来做. 1415: [Noi2005]聪聪和可可 Time Limit: 10 Sec  M ...

  2. java.lang.IllegalStateException: Queue full

    其实异常说的很清楚 队列满了! ArrayBlockingQueue FIFO 的队列: ArrayBlockingQueue内部是通过一个Object数组和一个ReentrantLock实现的.同时 ...

  3. Storm-源码分析-Topology Submit-Executor-mk-threads

    对于executor thread是整个storm最为核心的代码, 因为在这个thread里面真正完成了大部分工作, 而其他的如supervisor,worker都是封装调用. 对于executor的 ...

  4. mongoose学习

    #mongoose的使用详解# ##1.Scheme.model和Entity## Schema : 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model : 由Schema发布生成 ...

  5. tpot从elastic search拉攻击数据之二 配置端口映射

    虽然知道了本地的数据接口位置,但是我们需要的是从远程拉取数据,所以我们需要更改es的ip端口为0.0.0.0:xxxx. 直接修改下图的elasticsearch.yml配置文件,结果发现无效. 这是 ...

  6. node.js---sails项目开发（3）

    1.为新建的sails数据库新建一个用户,首先连接数据库 mongo localhost:27017 (1)显示所有数据库   (2)切换数据库 show dbs use sails 新建一个用户 账 ...

  7. springboot整合fastjson 将null转成空字符串

    /** * @Auther: mxf * @Date: 2019/4/18 09:12 * @Description: */ @Configuration @EnableWebMvc public c ...

  8. SIP穿越NAT SIP穿越防火墙-SBC

    FireWall&NAT FireWall是一种被动网络安全防卫技术,位于网络的边界.在两个网络之间运行訪问控制策略.防止外部网络对内部信息资源的非法訪问,也能够阻止特定信息从内部网络被非法输 ...

  9. RTSP客户端接收存储数据(live555库中的openRTSP实例)

    一.openRTSP编译运行 a)windows下编译运行 还是以mediaServer作为服务端,openRTSP作为客户端 b)Linux下编译运行 转自http://kuafu80.blog.1 ...

  10. C语言自带快速排序对比插入排序

    #include <stdio.h> #include <stdlib.h> #include <time.h> void getRandomArr (int ar ...