<!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="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" /> <!--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>
HTML5学习之智能表单（二）,布布扣,bubuko.com
原文：http://www.cnblogs.com/yxlblogs/p/3890768.html