之前我们判断用户提交的是否是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. 关于OBJC

    http://www.objc.io/ objc这个站点是:关于objective-c语言的最佳实践和高阶技术的期刊. 看了几期非常不错,所以计划每天抽出时间翻译一篇文章和大家一起分享.

  2. VC++ 带界面的ActiveX控件

    一.新建MFC ActiveX工程OleHasInterface: 二.新建一个对话框资源,ID为 IDD_FORMVIEW,关联类CActXInterfaceDlg,基类CDialog: 三.设计对 ...

  3. WHERE字句

    structured query language(非过程性的结构查询语言) 主要内容: 数据库怎么限制里面的数据: 数据库怎么排列里面的数据. WHERE子句: --WHERE字句起到的是对数据库查 ...

  4. python update from 2.6 to 2.7

    1 .wget http://python.org/ftp/python/2.7.3/Python-2.7.3.tar.bz2 2.tar -jxvf Python-2.7.3.tar.bz2 &am ...

  5. hdu1066(经典题)

    求N个数阶乘末尾除0后的数值. 主要的难点在于要把这个N个数所含的2和5的队数去掉. 网上方法很多很好. 不多说 Last non-zero Digit in N! Time Limit: 2000/ ...

  6. Codevs (3657括号序列 )

    题目链接:传送门 题目大意:中文题,略 题目思路:区间DP 这个题是问需要添加多少个括号使之成为合法括号序列,那么我们可以先求有多少合法的括号匹配,然后用字符串长度减去匹配的括号数就行 状态转移方程主 ...

  7. 【BZOJ4027】[HEOI2015]兔子与樱花 贪心

    [BZOJ4027][HEOI2015]兔子与樱花 Description 很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由n个树枝分叉点组 ...

  8. iOS 修改textholder的颜色

    UITextField *textField = [[UITextField alloc]initWithFrame:CGRectMake(, , , )]; textField.placeholde ...

  9. form.submit 方法 并不会触发 form.onsubmit 事件

    做表单的时候发现一个奇怪的地方,总结下: form.submit 方法 并不会触发 form.onsubmit 事件,看代码: <body> <div class="con ...

  10. php 正则表达式三.模式修正

    1.贪婪模式和懒惰模式, 贪婪模式:php中正则默认是贪婪模式,匹配尽可能多 的字符,比如 $pattern='/a+b/'; $subject='aaaaaaaaab,那么可能会preg_match ...