<!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. (原创)googlemap开发（一）

    听说我们的客户有了外国淫,所以领导问我目前的项目里高德地图和讯飞语音支持英文和英文发音不,按照我以往的经验判断,讯飞支持英语发音和识别英语是没有问题的,但是高德这玩意貌似只有我大天朝的地图吧.于是,找 ...

  2. java web项目中的web.xml标签之context-param

    WEB项目初始化过程: 在启动Web项目时,容器(比如Tomcat)会读web.xml配置文件中的两个节点<listener>和<contex-param>. 接着容器会创建一 ...

  3. Java异常之try，catch，finally，throw，throws

    Java异常之try,catch,finally,throw,throws 你能区分异常和错误吗? 我们每天上班,正常情况下可能30分钟就能到达.但是由于车多,人多,道路拥挤,致使我们要花费更多地时间 ...

  4. JS实现一键复制功能

    var copyClick = function (d) { var Url2 = $(d).parent().parent().find("#copy_value"); Url2 ...

  5. oracle中drop、delete和truncate的区别

    oracle中drop.delete和truncate的区别 oracle中可以使用drop.delete和truncate三个命令来删除数据库中的表,网上有许多文章和教程专门讲解了它们之间的异同,我 ...

  6. JS escape()、encodeURI()和encodeURIComponent()的区别

    1.实例说明: var url='http://wx.jnqianle.com/content/images/冰皮月饼.jpg?name=张三丰&age=11'; console.info(w ...

  7. HTML5 文件处理之FileAPI简介整理

    在众多HTML5规范中,有一部分规范是跟文件处理有关的,在早期的浏览器技术中,处理小量字符串是js最擅长的处理之一.但文件处理,尤其是二进制文件处理,一直是个空白.在一些情况下,我们不得不通过Flas ...

  8. Oracle dblink的创建及使用

    在工作中遇到的情况简单说下: --首先要赋予用户创建dblink的权限.grant resource to ods_nwsc;grant create database link to ods_nws ...

  9. [转]Web UI 设计命名规范

    来源:http://blog.bingo929.com/web-ui-design-name-convention.html 一.网站设计及基本框架结构: 1.    Container “conta ...

  10. PHP 进行统一邮箱登陆的代理实现（swoole）

    在工作的过程中,经常会有很多应用有发邮件的需求,这个时候需要在每个应用中配置smtp服务器.一旦公司调整了smtp服务器的配置,比如修改了密码等,这个时候对于维护的人员来说要逐一修改应用中smtp的配 ...