HTML5改良的input元素的种类

最新推荐文章于 2024-03-07 19:16:29 发布

lq1224825

最新推荐文章于 2024-03-07 19:16:29 发布

阅读量799

点赞数

分类专栏： html5 文章标签： html5 color

本文链接：https://blog.csdn.net/l954758514/article/details/78186592

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

lq1224825

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5改良的input元素的种类

1、color 当输入框属性为color时，可以直接调用系统提供的调色盘。唯一的缺点就是缺少透明度。这个属性有兼容问题，在iPhone上没法弹出颜色选项卡。颜色输入框<input type="color" name="color"/>2、url 当输入框类型为url的时候，只接受地址输入域名，当输入不正确的地址时，会不允许提交，具有自我检测功能。如果是移动端，键盘会自动切换到输入网址键盘（.co
复制链接

扫一扫