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