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>