<!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. Java基础知识强化之集合框架笔记35：List练习之产生10个1~20之间的随机数（要求：随机数不能重复）

    1. 需求:获取10个1-20之间的随机数,要求不能重复 用数组实现,但是数组的长度是固定的,长度不好确定.所以我们使用集合实现. 分析: • 创建产生随机数的对象 • 创建一个存储随机数的集合. • ...

  2. Unity3D GUI之自定义风格组件

    GUI中可以使用一些默认的组件,里面的最后一个参数一般情况下,不设置就是默认的 ,当然也可以进行手动的指定,比如: GUI.Button(new Rect(0,0,100,100),"开始游 ...

  3. 内网映射到公网工具 --- ngrok

    ngrok可以将内网映射到公网上,这样就可以在公网上访问你的网络服务. 该工具通常在进行app开发和微信开发时比较有用,这样就可避免在公网服务器上单独部署项目,通过映射,直接连接本地服务即可进行开发. ...

  4. angularjs ngTable -Custom filter template-calendar

    jsp页面: <script type="text/ng-template" id="path/to/your/filters/top-Date-One.html& ...

  5. Tomcat- java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml addServlet

    在MyEclipse中启动Tomcat的时候报错: java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml addServ ...

  6. Express难点解析

    app.js 应用程序入口文件1.// view engine setup 设置视图引擎app.set('views', path.join(__dirname, 'views'));//告诉expr ...

  7. 使用OC开发phonegp 组件

    使用OC开发phonegp 组件 1. 使用oc 对phonegp中的组件近些开发,首先具体的pgonegp跟nativecode之间的一些优劣就不说了,开发phonegp 对应的组件主要就是使用na ...

  8. php 备份数据库脚本

    <?php// 备份数据库$host = "localhost";$user = "root"; //数据库账号$password = "123 ...

  9. JQuery 点击控件获取当前坐标时不兼容IE7

    现在要求在点击文本框时,获取文本框的坐标,需要相对文本框的位置来显示信息. 思路就是,绑定文本框的click 事件,一旦有点击就触发,去调用clickevent 函数执行计算. $('#txt_m') ...

  10. C# winform DataGridView操作 （转）

    C# DataGridView控件动态添加新行 DataGridView控件在实际应用中非常实用,特别需要表格显示数据时.可以静态绑定数据源,这样就自动为DataGridView控件添加相应的行.假如 ...