之前我们判断用户提交的是否是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. Python 构造函数、 Python 析构函数、Python 垃圾回收机制

    构造函数与析构函数 构造函数: 用于初始化类的内容部状态,Python提供的构造函数式 __init__(); 也就是当该类被实例化的时候就会执行该函数.那么我们就可以把要先初始化的属性放到这个函数里 ...

  2. IOS开发之自定义键盘

     本文转载至 http://blog.csdn.net/majiakun1/article/details/41242069 实际开发过程中,会有自定义键盘的需求,比如,需要添加一个表情键盘.本文提供 ...

  3. Pert图简介

    活动图,即工程网络技术,又称PERT(Project Evaluation and Review Technique,PERT)技术. 参考地址: http://www.cnblogs.com/jiq ...

  4. cxGrid 根据列值变色(样式)

    在使用cxGrid的过程中,某一个单元格经常需要根据其他单元格的值来做相应的变色,如: 在cxGridDBTableView中,选定要变样式(如背景色.字体属性等)的列, 打开事件Events -&g ...

  5. hdu4565(矩阵快速幂+经典的数学处理)

    注意题目的一个关键条件(a-1)2< b < a2 , 于是可以知道    0 < a-√b < 1 ,所以 (a-√b)^n < 1 . 然后 (a+ √b)^n+(a ...

  6. OpenvSwitch自动化重新编译和安装

    相信使用过OpenvSwitch的人都知道,OpenvSwitch因为要替换一部分linux内核,所以在修改OpenvSwitch源码的时候,每次都需要重新编译和安装,这个过程十分的机械和枯燥,所以写 ...

  7. finereport Web工具栏

    1.获取报表工具栏按钮 在报表页面中,偶尔会有需要获取工具栏按钮的需求,之前只能通过contentPane.toolbar.options.items[index]来获取,比较不方便,现在我们提供了两 ...

  8. Powershell Get Domain Group的几种方法

    Group常见属性介绍: 一.Get-ADGroup获取群组(如下例循环获取群组的发送权限) #群组的发送权限info $groups=Get-ADGroup -filter * -SearchSco ...

  9. 你不知道的Javascript（上卷）读书笔记之四 ---- 提升、this

    1. 提升 使用var声明的变量声明和函数的声明(函数表达式不会)会被提升至所在函数作用域顶部 a. 从编译器角度出发 回忆一下, 中关于编译器的内容,引擎会在解释 JavaScript 代码之前首先 ...

  10. flink hadoop yarn

    新一代大数据处理引擎 Apache Flink https://www.ibm.com/developerworks/cn/opensource/os-cn-apache-flink/ 新一代大数据处 ...