h5新增表单属性及详介与拾色器纯js

最新推荐文章于 2021-08-03 11:28:38 发布

凡尘堕世

最新推荐文章于 2021-08-03 11:28:38 发布

阅读量259

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_46073353/article/details/116719714

版权

H5新增属性
HTML5 拥有多个新的属性。这些新特性提供了更好的输入控制和验证。

从拾色器中选择一个颜色:

选择一个颜色：<input type="color">

在这里插入图片描述

从一个日期选择器选择一个日期。

    <form>
        选择一个日期:<input type="date">
    </form>

在这里插入图片描述

email类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值是否合法有效:
tel定义输入电话号码字段。

    <form action="" id="myForm">
        用户名：<input type="text" name="qwe" placeholder="请输入用户名" autofocus autocomplete="on">
        <!-- placeholder:提示文本，提示占位符 -->
        <!-- autofocus:自动获取焦点 -->
        <!-- autocomplete="on/off"  自动完成 
            注意：1.必须是成功提交的，提交过后才会有记录
                  2.必须有name属性的配合
        -->
        手机号：<input type="tel" name="userPhone" pattern="^(\+86)?1\d{10}$" required>
        <!-- tel并不会实现验证，而是在移动端能够弹出数字键盘
            pattern:正则表达式验证
            required必须输入 如果没有输入则会阻止当前数据提交
        -->
        文件：<input type="file" name="userfile" multiple>
        <!-- multiple 多选 -->
        邮箱：<input type="email" name="useremail" multiple>

        确认密码：<input type="text" minlength=6 maxlength=12>
        <!--minlength输入最小长度maxlength输入最大长度-->
        <input type="submit">
    </form>

下面属性对数字类型的限定：

max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值

range 用于应该包含一定范围内数字值的输入域。

    <form>
        选择一个数字:<input type="range">
    </form>

元素表示任务的进度。
meter获取当前进度

    <progress max="100" value="90"></progress>
    <!-- 度量器：恒量当前的进度值 -->
    <meter high="80" low="40" min="0" max="100" value="90"></meter>
    <!-- 2分钟的倒计时 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background-color: black;
        }

        div {
            width: 50px;
            text-align: left;
            text-align-last: right;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="box"></div><br>
    <div>red:</div><input type="range" min="0" max="255" value="0"><br>
    <!--创建一个range框，给他最小值0与最大值255，与rgb相对应，给一个默认值为0-->
    <div>green:</div><input type="range" min="0" max="255" value="0"><br>
    <div>bule:</div><input type="range" min="0" max="255" value="0"><br>
    <script>
        var box = document.querySelector(".box")
        //获取颜色显示的div
        var int = document.querySelectorAll("input")
        //获取所有的input框
        var arr = [0, 0, 0]
        //创建数组，给rgb三个初始值
        for (let i = 0; i < 3; i++) {
        //遍历数组
            int[i].oninput = function () {
                //当input改变时，将range对应的值赋值给数组相对应的值，box显示的颜色随数组数据改变而改变
                arr[i] = int[i].value
                box.style.backgroundColor = "rgb(" + arr[0] + "," + arr[1] + "," + arr[2] + ")"
            }
        }
    </script>
</body>

</html>

凡尘堕世

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5新增表单属性及详介与拾色器纯js

H5新增属性HTML5 拥有多个新的属性。这些新特性提供了更好的输入控制和验证。从拾色器中选择一个颜色:选择一个颜色：<input type="color">从一个日期选择器选择一个日期。 <form> 选择一个日期:<input type="date"> </form>email类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值是否合法有效:tel定义输入电
复制链接

扫一扫