之前我们判断用户提交的是否是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. Ubuntu中su认证失败

    Ubuntu安装后,root用户默认是被锁定了的,不允许登录,也不允许 su 到 root 解决方法 sudo -i,输入当前用户密码后以root权限登录shell,无时间限制.使用exit或logo ...

  2. Activity公用跳转到主Activity

    public class VSession { private VSession() { } public static VSession getInstance() { if (session == ...

  3. manacher算法处理最长的回文子串（二）

    在上篇<manacher算法处理最长的回文子串(一)>解释了manacher算法的原理,接着给该算法,该程序在leetcode的最长回文子串中通过.首先manacher算法维护3个变量.一 ...

  4. 第一只python爬虫

    import urllib.request response = urllib.request.urlopen("http://www.baidu.com") html = res ...

  5. html ； css ； javascript ； json ；

    [说明]今天因为看到了前端的js页面和html页面,觉得有必要熟悉一下他们的基本语法,所以花了一天的时间去复习巩固了一下(之前学习过),包括html语法,css语法,javascript语法,对象.B ...

  6. Flutter入门之有状态组件

    StatefulComponent使用方法入门 在上一篇Flutter入门之无状态组件中我们讲到了无状态组件,所谓的无状态组件指的就是其内部的状态是来自其父组件并使用final类型的变量来存储,当组件 ...

  7. matplotlib图像中文乱码(python3.6)

    方法一:(在代码中添加如下代码) import matplotlib #指定默认字体 matplotlib.rcParams['font.sans-serif'] = ['SimHei'] matpl ...

  8. 决策树ID3算法python实现 -- 《机器学习实战》

    from math import log import numpy as np import matplotlib.pyplot as plt import operator #计算给定数据集的香农熵 ...

  9. https://blog.newrelic.com/2014/05/02/25-php-developers-follow-online/

    w https://blog.newrelic.com/2014/05/02/25-php-developers-follow-online/ 1. Rob Allen. Zend Framework ...

  10. Hibernate 处理事务

    1. Hibernate 的持久化类 1.1 什么是持久化类 持久化类: 就是一个 Java 类(JavaBean),这个 Java类与表建立了映射关系就可以是持久化类; 持久化类 = JavaBea ...