<!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. sql 减去分钟

    SQL SERVER:SELECT DATEADD( minute,-10,GETDATE()) ORACLE:SELECT to_char(sysdate -interval '10' minute ...

  2. insert当 sql语句里面有变量 为字符类型的时候 要3个单引号

    set @InsertStr='INSERT INTO [dbo].[T_SchoolPercentMonth]([SchoolID],[MonthOfYear],[PercentNum]) VALU ...

  3. JQuery的$命名冲突详细解析

    在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg')的写法.然而,当我们引入多个js库后,在另外一个js库中 ...

  4. html px em pt长度单位(像素 相对长度 点)知识(转)

    html px em pt单位区 一.PX\EM\PT单位介绍 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐:em单位名称为相对长度单位.相对于当前对象内文本的 ...

  5. U3D 实现子弹发射效果

    首先,这里子弹要模拟的相似的话,用2D刚体比较好,会有重力,自由落体运动. using UnityEngine; using System.Collections; public class gun ...

  6. [原创] SQLite数据库使用清单（下）

    上文两章对SQLite的功能.语法.和操作进行了介绍,本文讲解SQLite的一些高级语法和操作. 3.

  7. linux常用命令之ln

    ln是linux中又一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个同不的链接,这个命令最常用的参数是-s,具体用法是:ln –s 源文件 目标文件. 当我们需要在不同的目录,用到相同的 ...

  8. IOS学习--UIButton常用方法（20150122）

    // 1.创建一个自定义的按钮 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; // 2.添加按钮 [self.view a ...

  9. CoreBluetooth

    Core Bluetooth的基本常识 每个蓝牙4.0设备都是通过服务(Service)和特征(Characteristic)来展示自己的 一个设备必然包含一个或多个服务,每个服务下面又包含若干个特征 ...

  10. C# 多个线程一直跑着While(true)

    在使用多线程的时候,开了多个线程一直在While(true),会造成CPU占用很高.这时候要在线程内加入一句Thread.Sleep(1),让他稍微睡一下.就不会消耗那么多CPU了. 代码: Thre ...