HTML5改良的input元素的种类

来源：互联网发布：如何在淘宝搜原味丝袜编辑：程序博客网时间：2024/05/16 14:22

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>

阅读全文

0 0