<!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. eclipse4.3 kepler中安装maven

    1.软件准备 a:Eclipse 4.3 http://www.eclipse.org/downloads/ b:maven http://maven.apache.org/download.cgi ...

  2. Java-Hirbernate小结大纲

    Hibernate Hibernate是一个开放源代码的对象关系映射框架 Hibernate的核心接口一共有6个,分别为:Session.SessionFactory.Transaction.Quer ...

  3. javascript权威指南第6版学习笔记

    javascript权威指南第6版学习笔记 javascript数组.函数是特殊对象 看一点少一点. 3.1.4 hello.js内容是 var x=.3-.2;var y=.2-.1 console ...

  4. Android -- 双击退出

    实现android双击后退键退出当前APP功能 实现该功能基本思路是, 1, 监听后退键 , 比较两次后退间隔 , 低于两秒则出发退出 2, 退出当前APP 我选择在基类中BaseActivity 中 ...

  5. AppStore上架规则

    1. 条款和条件1.1 为App Store开发程序,开发者必须遵守 Program License Agreement (PLA).人机交互指南(HIG)以及开发者和苹果签订的任何协议和合同.以下规 ...

  6. 添加Appicon的方法

    1.将设计好的图片,拖拽到Groups&Files的Resources目录下: 2.修改Resources目录下的“工程名-info.plist”文件 3.修改该文件的Iconfile属性,填 ...

  7. 数字证书文件cer和pfx的区别

    作为文件形式存在的证书一般有这几种格式: 1.带有私钥的证书 由Public Key Cryptography Standards #12,PKCS#12标准定义,包含了公钥和私钥的二进制格式的证书形 ...

  8. SGU 195. New Year Bonus Grant

    时间限制:0.75s 空间限制:4M 题意: 在一颗树(最多500000个节点)中,可以对节点染色,但是一个节点染了色后,它的父节点和兄弟节点都不能再染了,求最大的染色节点数,并输出所有染色节点. S ...

  9. Codeforces 543B Destroying Roads(最短路)

    题意: 给定一个n个点(n<=3000)所有边长为1的图,求最多可以删掉多少条边后,图满足s1到t1的距离小于l1,s2到t2的距离小于l2. Solution: 首先可以分两种情况讨论: 1: ...

  10. gvim 常用命令

    插入: insert 强退: :q! 退出: :q 保存: :w 保存退出::wq 复制: yy(单行)   多行:8yy 删除: dd(单行)   多行:8dd 或者 :4,8d 执行脚本: :! ...