1.url类型、email类型、date类型、time类型、datetime类型、datetime-local类型、
month类型、week类型、number类型、range类型、search类型、tel类型、color类型
<!--url类型-->
<form>
<input name="url" type="url" value="http://www.baidu.com">
<input type="submit" value="提交">
</form>
<!--email类型-->
<form>
<input type="email" type="email" value="admin@qq.com">
<input type="submit" value="提交">
</form>
<!--date类型-->
<input type="date" name="date" value="">
<br/>
<!--time类型-->
<input name="time" type="time" value="10:00">
<!--datetime类型-->（utc编码格式，国际时间）
<input name="datetime" type="datetime" value="">
<!--datetime-local类型-->(本地时间，会进行判断)
<input name="datetimelocal" type="datetime-local">
<!--month元素-->(只能选择月份)
<input name="month" type="month" value="2010-01-01">
<!--week元素-->
<input name="week" type="week">
<!--number类型-->
<input name="number" type="number" value="12" min="10" max="100" step="5">
<!--计算器-->
<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 type="number" id="num2">
=
<input type="number" id="result" readonly>
<input type="button" value="计算" onclick="sum()">
</form>
range类型的input元素
是一个只允许输入一段范围内数值的文本框，具有最大值和最小值属性，具有step属性，
<input name="range" type="range" value="25" min="0" max="100" step="5">
<!--search类型-->
<input type="search">
<!--tel类型-->
<input type="tel">
<!--color类型-->
<input type="color" onchange="document.body.style.backgroundColor=document.getElementById('currentColor ').textContent=this.value">
<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="10" onchange="value_change() ">
<output id="output">10</output>
</form>
表单验证
<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"><br/>
<input type="submit">
</form>