在html5中，大幅度增加与改良了input元素的种类，可以简单的使用这些元素来实现之前需要JS脚本来实现的功能。
1、url类型、email类型、date类型、time类型、datetime类型、datatime-local类型、month类型、week类型、number类型、range类型、search类型、Tel类型、color类型
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>g改良的input元素</title>
</head>
<body>
<form>
<!--url-->
<input name="url" type="url" value="http://jikexueyuan.com"></input>
<input type="submit" value="提交"></input>
<br>
<!--email-->
<input name="email" type="email" value="bluebird@qq.com"></input>
<input type="submit" value="提交"></input>
</form>
<br>
<!--date-->
<input name="date" type="date" value=""></input>
<!--time-->
<br>
<input name="time" type="time" value="10:00"></input>
<!--datetime-->
<br>
<input name="datetime" type="datetime" value=""></input>
<!--datetime-local-->
<br>
<input name="datetime-local" type="datetime-local" value=""></input>
<!--month-->
<br>
<input name="month" type="month" value="2010-01-01"></input>
<!--week-->
<br>
<input name="week" type="week"></input>
<!--number-->
<br>
<input name="number" type="number" value="15" min="10" max="100" step="5"></input>
<!--简单的计算器-->
<br>
<script>
function sum(){
var n1=document.getElementById("num1").valueAsNumber;
var n2=document.getElementById("num2").valueAsNumber;
document.getElementById("result").valueAsNumber = n1 + n2;
}
</script>
<form>
<input type="number" id="num1"></input>
+
<input type="number" id="num2"></input>
=
<input type="number" id="result" readonly></input>
<input type="button" value="计算" onclick="sum()"></input>
</form>
<!--range滑动条-->
<br>
<input name="range" type="range" value="25" min="0" max="100" step="5"></input>
<!--serachs用于搜索域，比如站点搜索或google搜索-->
<input type="search"></input>
<!--tel-->
<br>
<input type="tel"></input>
<!--color-->
<br>
<input type="color" onchange="document.body.style.backgroundColor = document.getElementById("currentColor").textContent = this.value;"></input>
<span id="currentColor"></span>
<!--output-->
<script>
function value_change(){
var number = document.getElementById("range").value;
document.getElementById("output").value=number;
}
</script>
<form id="testform">
<input id="range" type="range" min="0" max"100" step="5" value="25" onchange="value_change()"></input>
<output id="output">25</output>
</form>
</body>
</html>
2、表单验证
<body>
<script>
function check(){
var email = document.getElementById("email");
if (email.value=="") {
alert("请输入email");
return false;
}else if(!email.checkValidity()){
alert("请输入正确的email地址");
return false;
}
}
</script>
<form id="testform" onsubmit="check()" novalidate="true">
<label for="email">email</label>
<input name="email" type="email" id="email"></input>
<br>
<input type="submit"></input>
</form>
</body>