?【HTML5 敏捷实践】第1章使用语义化的方式实现

浏览数：20 / 时间：2015年06月09日

<!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>