HTML5新增了很多属性功能。但是有兼容性问题，因为这些表单功能新增的。我这里做了一个简单的练习，方便参考。如果完全兼容的话，那我们写表单的时候就省了很多代码以及各种判断。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>HTML5表单新功能解析</title>
<style type="text/css">
#da{
width:350px;
height:600px;
margin:0 auto;
} </style>
</head>
<body>
<form action="" method="post"> <fieldset id="da">
<legend>HTML5新表单元素</legend>
<label>国家：</label>
<input type="text" value="" autofocus="autofocus" required="required"/><p></p>
<label>文件：</label>
<input type="file" value="" multiple="multiple"/><p></p>
<label>正则：</label>
<input type="" name="" id="" value="" placeholder="请输入6-16的数字或字母" pattern="^[a-zA-Z0-9]{5,12}$" required="required"/><p></p>
<label>邮箱：</label>
<input type="email" name="" id="" value="" required="required"/><p></p>
<label>网址：</label>
<input type="url" name="" id="" value="" required="required"/><p></p>
<label>日期：</label>
<input type="date" name="" id="" value="" required="required"/><p></p>
<label>数字：</label>
<input type="number" name="" id="" value="" required="required"/><p></p>
<label>滑块：</label>
<input type="range" name="" id="range" value="65" step="1" max="500" onchange="showValue(this.value)" required="required"/>
<span id="rangeValue"></span><p></p>
<label>搜索：</label>
<input type="search" name="" id="" value="" required="required"/><p></p>
<label>电话：</label>
<input type="tel" name="" id="" value="" required="required"/><p></p>
<label>颜色：</label>
<input type="color" name="" id="" value="" required="required"/><p></p>
<label>占位：</label>
<input type="text" name="" id="" value="" placeholder="请输入用户名" required="required"/><p></p> <input type="submit" value="提交"/> <input type="submit" value="查找" formnovalidate="formnovalidate"/>
</fieldset> </form> <script type="text/javascript"> function showValue(val){
document.getElementById("rangeValue").innerHTML=val;
}
</script>
</body>
</html>
