HTML5新表单控件（一）

最新推荐文章于 2024-04-27 21:00:39 发布

小可同学啊

最新推荐文章于 2024-04-27 21:00:39 发布

阅读量108

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_55041880/article/details/118100033

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

新的表单控件 -type=“number” 数值的输入域 min max为数字的限定

-type=“range” 数字值滑动条除了最大最小值还有步长必须满足(最大值减最小值的结果可以被step整除)

新的表单控件还有

color data time datatime-local month week email search tel url

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="number" min="0" max="10" value="5"/>
    <input type="range" min="1" max="10" step="3"/>
    <output></output>
    <script>
        var oIn = document.getElementsByTagName("input")[1];
        var oOu = document.getElementsByTagName("output")[0];
        oIn.oninput = function (){
            oOu.innerHTML = oIn.value;
        } 
    </script>
</body>
</html>

结果
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小可同学啊

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5新表单控件（一）

新的表单控件 -type=“number” 数值的输入域 min max为数字的限定-type=“range” 数字值滑动条除了最大最小值还有步长必须满足(最大值减最小值的结果可以被step整除)在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=".
复制链接

扫一扫