<!DOCTYPE html>

向后兼容的HTML5<doctype>标签。HTML5规范规定<doctype>对大小写不敏感；然而，之前版本的HTML需要<doctype>全部大写。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        :invalid {

            border-color: #DB729C;

        }

        :required {

            border-color: #1BE032;

        }

    </style>

</head>

<body>

    <form id="myForm" name="myForm">

        <input type="text" autocomplete="on" autofocus required placeholder="占位文字" pattern="[0-9]{5}">

        <input type="text" list="animals">

        <input type="number" name="quantity" min="1" max="5" value="11" onchange="console.log(this.value)" oninput="updateMessage(this)" oninvalid="console.log('fail')">

        <datalist id="animals">

            <option value="Dog">

            <option value="Dolphin">

            <option value="Duck">

            <option value="Cat">

            <option value="Bird">

            <option value="mouse">

        </datalist>

        <input type="email" oninput="updateMessage(this)">

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

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

    </form>

    <form id="myForm2" novalidate>

        <input type="email" id="email" data-myvalue="eee">

    </form>

    <input type="submit" value="submit" form="myForm2">

    <script>

        if (document.myForm.checkValidity() === false) {

            console.log('fail')

        }

        document.myForm.quantity.setCustomValidity('looks like your numbers ... between one and five')

        function updateMessage(input) {

            if (input.value >=1 && input.value <= 5) {

                input.setCustomValidity('') // 不清掉会一直提示

            }

        }

        console.log(document.getElementById('email').dataset.myvalue)

        console.log(document.getElementById('email').getAttribute('data-myvalue'))

    </script>

</body>

</html>

♫【HTML5 敏捷实践】第1章 使用语义化的方式实现的更多相关文章

  1. HTML5学习笔记（三）：语义化和新增结构元素

    在HTML5之前,使用机器来阅读一个网页是非常困难的,我们使用不同样式的div来标记不同的内容,所以实际上机器无法得知页面的哪个部分是正文,哪个部分是标题,那么在HTML5里,针对这个问题就引入了语义 ...

  2. 你应该了解的CSS语义化命名方式及常用命名规则

    CSS语义化命名 从上图我们可以大概看出这里有两种CSS的命名方式:1.结构化命名法:2.语义化命名法. 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把 ...

  3. html5新增的语义化标签极其作用

    在html5中,新增了几个语义化标签:<article>.<section>.<aside>.<hgroup>. <header>,< ...

  4. HTML 语义化标签-新增标签介绍

    HTML 基础知识 版权声明:未经博主授权,内容严禁转载 ! HTML语义化标签概念 如果没有语义化标签,上面这些 div 都是没有实际意义的,只是我们提供给浏览器的指令. 和 语义化 代码对比: 什 ...

  5. HTML语义化（2016/3/16更新）

    目录 什么是HTML语义化? 为什么要语义化 常用标签的语义 HTML5新元素 一.什么是HTML语义化? 简单来讲就是:每个标签做自己的事,使得能够被机器直接读懂. 二.为什么要语义化? 1.更容易 ...

  6. [HTML知识体系]语义化标签概论

    1.什么是语义化 语义化(Semantic)在HTML5中被大量提起,就是语义化标签向浏览器和开发者展示了它所包裹内容的类型与意思,可是至今我看了好多代码,HTML5新增的语义化标签的使用率还是挺低的 ...

  7. HTML新增的语义化标签及其作用

    在html5中,新增了几个语义化标签:<article>.<section>.<aside>.<hgroup>. <header>,< ...

  8. 如何让你的JavaScript代码更加语义化

    语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.其作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形 ...

  9. CSS代码命名惯例语义化的方法

    CSS代码的命名惯例一直是大家热门讨论的话题.今天暴风彬彬想通过分析一个流行三栏布局中的必要元素,来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导. 您还可以参考彬Go的相关文章 ...

随机推荐

  1. div css背景图片不显示

    我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...

  2. linux的openfire运行日志配置经历

    openfire的日志可以通过/usr/openfire/lib/log4j.xml(与openfire的安装目录有关,我的openfire是安装在/usr/openfire/)的xml配置文件进行设 ...

  3. atoi、stoi、strtoi区别

    首先atoi和strtol都是c里面的函数,他们都可以将字符串转为int,它们的参数都是const char*,因此在用string时,必须调c_str()方法将其转为char*的字符串.或者atof ...

  4. MVC中javascript直接调用Model

    最近做一个统计页面, Model从后台已经获取了数据集合,想直接在前台展示,而这个展示是需要用js生成图表的. 控制器部分代码: public ActionResult Index() { var m ...

  5. JAVA JDK 1.6 API中文版.CHM打开chm提示，“ 已取消到该网页的导航”

    JAVA  JDK 1.6 API中文版.CHM打开chm提示,“ 已取消到该网页的导航” silent fish 装了win7后,打开chm文件,发现很多在xp系统打开正常的chm文件竟然出现问题, ...

  6. [转帖]MATLAB曲线绘制及颜色类型

    信号源产生的方法 来源:http://www.2cto.com/kf/201401/270494.html  matlab的checkerboard说明,GOOD! 来源:http://www.chi ...

  7. C#入门经典（第五版）学习笔记（三）

    ---------------面向对象编程简介--------------- UML表示方法: 1)方框上中下三分 2)上框写类名 3)中框写属性和字段,例如:+Description:string  ...

  8. Using GUID to generate the unique file name in C#

    GUID, the abbreviation of "Global Unique Identifier", is a unique reference number used as ...

  9. LA 6856 Circle of digits 解题报告

    题目链接 先用后缀数组给串排好序.dc3 O(n) 二分答案+贪心check 答案的长度len=(n+k-1)/k 如果起点为i长为len串大于当前枚举的答案,i的长度取len-1 从起点判断k个串的 ...

  10. c# winfrom 委托实现窗体相互传值

    利用委托轻松实现,子窗体向父窗体传值. 子窗体实现代码: //声明委托 public delegate void MyDelMsg(string msg); //定义一个委托变量 public MyD ...