HTML5代码学习（2）智能表单-职坐标

HTML5代码学习（2）智能表单

沉沙 2018-11-06 来源：阅读 1272 评论 0

摘要：本篇教程探讨了HTML5代码学习（2）智能表单，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML5代码学习（2）智能表单，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

<!DOCTYPE html>
<html xmlns="//www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form action="文档结构和语义.html" method="post" oninput="updateSum();">
        
        普通文本框<input type="text" tabindex="1" pattern="[a-z]{3,32}" />
        
        <br />
        一行文本<input type="tel" tabindex="3" /><br />
        一行文本<input type="search" autofocus list="searchList" tabindex="2" />
        <datalist id="searchList">
            <option>aaa</option>
            <option>bbb</option>
        </datalist>
        <br />
        绝对URL地址<input type="url" /><br />
        有效的e-mail地址<input type="email" placeholder="aaa@qq.com" required  id="email" /><br />
        日期及时间（使用UTC时间）<input type="datetime" /><br />
        不带时区的日期<input type="date" min="2010-08-01" max="2010-11-11" step="7" />
        
        <br />
        不带时区的月份<input type="month" /><br />
        不带时区的年及周<input type="week" /><br />
        不带时区的时间<input type="time" min="14:30" max="19:30" step="3600" /><br />
        时区的当期日期及时间<input type="datetime-local" /><br />
        数字<input type="number" max="1" min="0" step="0.1" /><br />
        一定范围内的数值<input type="range" /><br />
        十六进制RGB值<input type="color" /><br />
        
        <meter value="0.5"></meter>
        <progress value="3" max="10"></progress>


        price:<input type="number"  id="price"/> quantity:<input type="number" id="quantity" />
        <output name="sum" id="sum" for="price quantity"></output>
        <input type="submit" name="name" value="提交" />
    </form>
    <script type="text/javascript">
        function updateSum() {
            document.getElementById("sum").value = parseFloat(document.getElementById("price").value) * parseFloat(document.getElementById("quantity").value);
        };

        window.onload = function () {

            //document.getElementById("email").addEventListener("invalid", function () {
            //    this.style.border = "dotted 2px red";
            //});

            document.getElementById("email").onchange = function() {
                if (!this.checkValidity()) {
                    this.style.border = "dotted 2px red";
                } else {
                    this.style.border = "";
                }
            };
            alert(document.querySelectorAll(":required")[0].tagName); //input
            alert(document.getElementById("email").nextSibling.tagName);// br

        };
    </script>


</body>
</html>