HTML5学习之智能表单（二）

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

<!DOCTYPE html>
<html xmlns="http://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();">
        <!--tabindex tab键切换的优先级 -->
        普通文本框<input type="text" tabindex="1" pattern="[a-z]{3,32}" />
        <!--pattern 正则表达式验证-->
        <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="[email protected]" required  id="email" /><br />
        日期及时间（使用UTC时间）<input type="datetime" /><br />
        不带时区的日期<input type="date" min="2010-08-01" max="2010-11-11" step="7" />
        <!--step=“7” 在min日期上以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><!--输出updateSum()计算的值 -->
        <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>