1、color
当输入框属性为color时，可以直接调用系统提供的调色盘。唯一的缺点就是缺少透明度。这个属性有兼容问题，在iPhone上没法弹出颜色选项卡。
颜色输入框<input type="color" name="color"/>2、url
当输入框类型为url的时候，只接受地址输入域名，当输入不正确的地址时，会不允许提交，具有自我检测功能。如果是移动端，键盘会自动切换到输入网址键盘（.com、www）。
url输入框<input type="url" name="url"/><br/>3、email
当输入框格式为email的时候，只接受邮箱输入，当输入的不为邮箱或者邮箱格式时，回报错，具有自我检测功能。如果是移动端，键盘会自动切换到输入邮箱键盘（@）。
邮箱输入框<input type="email" name="email"/><br/>4、tel
当输入框中的属性tel的时候，那此输入框就是为了输入电话而设置的，它并没有特殊的校验规则，可以通过pattern属性来进行手动校验。如果是移动端，键盘会自动切换到输入电话键盘（数字、+、*、#）。
电话输入框<input type="tel" name="tel" pattern=""/><br/>、5、search
Search类型的input元素是一种专门用来搜索关键字的文本框，search类与text类型仅仅在外观上不同。如果是移动端，键盘会自动切换到输入搜索键盘（@）。
6、number
当输入框类型为number时，可以设置输入框所接受数字的输入域，可以用max,min 来实现这一点。
7、时间控件date
Date在input元素属性是以日历的形式显示给用户，缺点：就是只有在谷歌浏览器上显示给用户以日历的形式，其他浏览器不兼容，比如IE浏览器。
<form action="#" method="get">
<input type="date" name="date"/>
</form>8、time时间
Time属性是input元素中一种专门输入时间的文本框。它会接受用户输入的时间进行自我检测。在其他浏览器上也可以显示和谷歌浏览器一样的效果！
<input type="time" name="time" value="23:23"/>9、week
在input中主要显示日期第几周。
周：<input type="week"/><br/>注意：只显示年和周
10、Month
Month：这个属性主要显示月份，跟date相比较月份在在input元素少了日。
月：<input type="month"/><br/>11、range 滑动条
对于设置了type的input，如果输入框为空的，提交的时候不校验，但是如果填写了内容，填写的格式不对的话提交的时候会显示不对，同时鼠标光标focus到该输入框。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 300px;
height: 300px;
background-color: green;
opacity: 0;
}
</style>
</head>
<body>
<div id="div1"></div>
<input type="range" id="range" max="1" min="0" step="0.05" oninput="change()">
</body>
<script>
var div1 = document.getElementById("div1");
function change(){
var value = document.getElementById("range").value;
div1.style.opacity = value;
div1.innerHTML = value;
}
</script>
</html>
