HTML5 新特性之HTML5 的输入（input）类型（h5没有vue也能实现你想要的炫酷）

移动开发 2023-12-16 22:32:33 阅读次数: 0

HTML5 新特性之HTML5 的输入（input）类型（h5没有vue也能实现你想要的炫酷）

1. 前言

1.1 label标签

  • 首先先介绍一下下面会出现的<label>标签，这个不是h5的新特性，所以在这里只简单提一下，如果了解的童鞋可以跳过。
  • label 标签的作用是为鼠标用户改进了可用性，当用户点击 label标签 中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上。通常是写在表单（form）内。
  • 两种关联方式：
    • 显式关联
      若要将<label>元素与<input>元素显式关联，首先需要在<input> 元素中设置 id 属性。接下来，将 for 属性添加到元素中 <label> ，其中 的值 for 与 <input> 元素中 id属性的值相同。
      <div>
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese" />
</div>
  
<div>
    <label for="peas">Do you like peas?</label>
    <input type="checkbox" name="peas" id="peas" />
</div>
      在这里插入图片描述
    • 隐式关联
      您可以直接将 <input> 嵌套在 <label> 中，在这种情况下， for 不需要 和 id 属性，因为关联是隐式的，如下：
      <label>
   Do you like peas?
   <input type="checkbox" name="peas" />
</label>

2. h5表单控件属性（input类型）

2.1 E-mail 地址字段

  • 代码如下：
    <div>
   <label for="email">邮箱(email): </label>
   <input type="email" id="email" name="email">
</div>
  • 自动校验的效果如下：
    在这里插入图片描述
    在这里插入图片描述

2.2 电话号码字段

  • 代码如下：
    <input type="tel" id="telphone" name="telphone">
  • 这个在移动端能看效果，具体介绍看官网怎么说吧，直接给官网图：
    在这里插入图片描述

2.3 URL 字段

  • 代码如下：
    <input type="url" id="url" name="url">
  • 效果如下：
    在这里插入图片描述

2.4 数字字段

  • 代码如下：
    • 例1：创建了可从 1 到 121 之间选择值的数字选择器，且单击一次按钮所增长或减少的值为 2。
      <input type="number" name="oddNumber" id="oddNumber" min="1" max="121" step="2" />
    • 例2：创建了可从 0 到 1 之间选择值得数字选择器，且单击一次按钮所增长或减少的值为 0.01。
      <input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />
  • 效果：
    在这里插入图片描述
  • 说明：
    • 通常以旋转器——spinner的形式提供按钮来增加和减少控件的值。在有动态键盘的设备上，一般会显示数字键盘。
    • 使用 number input 类型，你可以使用 min 和 max 属性控制允许输入的最小值和最大值。
    • 你也可以使用 step 属性来设定每次按下 spinner 按钮增加或减少的值。默认情况下，number input 类型只允许整数值输入，为了允许浮点数输入，要指定 step=“any” (en-US)。如果省略了此值，step 会默认为 1，意味着只有自然数是有效的输入。
    • 当有效值的范围有限时，number 输入类型才有意义，例如一个人的年龄或身高。如果范围太大，渐进式增加没有意义（如范围为 00001 到 99999 的美国 ZIP 码）的话，使用 tel 类型可能会更好。

2.5 查询字段

  • 代码如下：
    <input type="search" id="search" name="search" />
  • 效果如下：
    在这里插入图片描述
    在这里插入图片描述
  • 说明：
    • text 字段和 search 字段的主要区别是浏览器赋予它们的外观显示。通常情况下，search 字段拥有圆角边框，有时会显示“Ⓧ”标志，当点击它时会清除输入框。
    • 另外，在动态键盘设备上，键盘的回车键会显示“search”，或显示为放大镜图标。
    • 清除图标“Ⓧ”仅当在输入框中存在值得时候才会显示。
    • 其他某些浏览器且与 Safari 不同的是，仅当聚焦状态时才会显示“Ⓧ”图标。
    • 另外一个值得提示的特性是，search 字段的值可以自动地保存下来，在同一网站的自动完成框中复用输入，这样的特性倾向于在大多数现代浏览器中自动进行。

2.6 日期和时间选择器

2.6.1 几种不同的类型

  • 很简单，直接看代码
     <div>
     <label for="datetime">时间1(datetime-local): </label>
     <input type="datetime-local" name="datetime" id="datetime" />
 </div>

 <div>
     <label for="date">时间2(date): </label>
     <input type="date" name="date" id="date" />
 </div>

 <div>
     <label for="month">时间3(month): </label>
     <input type="month" name="month" id="month" />
 </div>

 <div>
     <label for="week">时间4(week): </label>
     <input type="week" name="week" id="week" />
 </div>

 <div>
     <label for="time">时间5(time): </label>
     <input type="time" name="time" id="time" />
 </div>
  • 再看大致效果
    在这里插入图片描述

2.6.2 设置时间默认值

  • 你可以将一个包含日期和时间的值放在 value 属性中以为控件设置一个默认值（注意下面value的设置值的格式），代码如下：
    <div>
	<!-- value="2017-06-01T08:30" 或者 value="2017-06-01 08:30" 都可以-->
    <label for="party">输入预订宴会的日期和时间：</label>
    <input
    id="party"
    type="datetime-local"
    name="partydate"
    value="2017-06-01T08:30" />
</div>
    在这里插入图片描述

2.6.3 设定日期时间的最大值和最小值

  • 你可以使用 min 和 max 属性来限制用户可选择的日期/时间。在下面的例子中我们设定最小的日期时间 2017-06-01T08:30 和最大的日期时间 2017-06-30T16:30：
    <div>
    <label for="party2">输入预订宴会的日期和时间(有时间范围限制)：</label>
    <input
      id="party2"
      type="datetime-local"
      name="partydate2"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30" />
</div>
    在这里插入图片描述

2.6.4 关于格式问题（处理浏览器支持）

  • 请参考下面的地址：
    https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/datetime-local.
  • 如果格式上浏览器不支持或其他问题，可使用jQuery的Datepicker
    https://jqueryui.com/datepicker/.
    • jQuery代码如下：
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Datepicker - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
        <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
        
        <script>
            $( function() {
          
          
            $( "#datepicker" ).datepicker();
            } );
        </script>
      </head>

    <body>
       
      <p>Date: <input type="text" id="datepicker"></p>
       
    </body>
</html>
    • 效果如下：
      在这里插入图片描述

2.7 颜色选择器控件

  • 颜色总是有点难处理。有许多方法来表达它们，如 RGB 值（十进制或十六进制）、HSL 值、关键词等。
    用于输入颜色的控件可以由 type 为 color 的 <input> 元素创建，代码如下：
    <input type="color" name="color" id="color" />
  • 效果如下：
    在这里插入图片描述
  • 说明：
    返回值总是颜色的小写的 6 位十六进制数表示。比如：#395cac
    在这里插入图片描述

2.8 滑块控件

2.8.1 关于滑块控件说明

  • 这是另外一种选择数字的方式是使用滑块（slider）。你在买房网站等网站上经常看到这种情况，你想设置一个最高的房产价格来进行过滤。
  • 从使用上来说，滑块的准确性不如文本字段。因此，它们被用来挑选精确值不一定那么重要的数字。
  • 在 <input> 元素中使用 range 作为属性 type 的值，就可以创建一个滑块，滑块可以通过鼠标、触摸，或用键盘的方向键移动。
  • 正确配置滑块组件非常重要。推荐分别配置 min (en-US)、max (en-US) 和 step (en-US) 属性来设置滑块的最小值、最大值和增量值。

2.8.2 简单例子

  • 代码如下：
    <div>
    <label for="price">Choose a maximum house price: </label>
    <input
        type="range"
        name="price"
        id="price"
        min="50000"
        max="500000"
        step="100"
        value="250000" />
    <output class="price-output" for="price"></output>
</div>

    <script>
    const price = document.querySelector("#price");
    const output = document.querySelector(".price-output");

    // 设置output 的 textContent的初试值为滑块的默认值
    output.textContent = price.value;

    //设置了一个事件监听器，确保每次范围滑块移动时，output 的 textContent 总是可以及时更新为新值。
    price.addEventListener("input", () => {
      
      
        output.textContent = price.value;
    });
</script>
  • 效果如下：
    在这里插入图片描述
  • 关于上面使用的<output>标签请往下看……

2.9 附：上面所有代码

  • 如下：
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form>
        <div>
            <label for="email">邮箱(email): </label>
            <input type="email" id="email" name="email">
        </div>

        <div>
            <label for="telphone">电话号码(tel): </label>
            <input type="tel" id="telphone" name="telphone">
        </div>

        <div>
            <label for="url">网址(url): </label>
            <input type="url" id="url" name="url">
        </div>

        <div>
            <label for="oddNumber">奇数(number): </label>
            <input type="number" name="oddNumber" id="oddNumber" min="1" max="120" step="2" />
        </div>
        <div>
            <label for="pennies">数字2(number): </label>
            <input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />
        </div>

        搜索: <input type="search" id="search" name="search" /><div style="height: 20px;"></div>

        <div>
            <label for="datetime">时间1(datetime-local): </label>
            <input type="datetime-local" name="datetime" id="datetime" />
        </div>

        <div>
            <label for="date">时间2(date): </label>
            <input type="date" name="date" id="date" />
        </div>

        <div>
            <label for="month">时间3(month): </label>
            <input type="month" name="month" id="month" />
        </div>

        <div>
            <label for="week">时间4(week): </label>
            <input type="week" name="week" id="week" />
        </div>

        <div>
            <label for="time">时间5(time): </label>
            <input type="time" name="time" id="time" />
        </div>

        <div>
            <!-- value="2017-06-01T08:30" 或者 value="2017-06-01 08:30" 都可以-->
            <label for="party">输入预订宴会的日期和时间：</label>
            <input
            id="party"
            type="datetime-local"
            name="partydate"
            value="2017-06-01T08:30" />
        </div>

        <div>
            <label for="party2">输入预订宴会的日期和时间(有时间范围限制)：</label>
            <input
              id="party2"
              type="datetime-local"
              name="partydate2"
              min="2017-06-01T08:30"
              max="2017-06-30T16:30" />
        </div>

        <div>
            选择颜色：
            <input type="color" name="color" id="color" />
        </div>

        <div>
            <label for="price">Choose a maximum house price: </label>
            <input
                type="range"
                name="price"
                id="price"
                min="50000"
                max="500000"
                step="100"
                value="250000" />
            <output class="price-output" for="price"></output>
        </div>

        <div style="margin-top: 50px;">
            <button id="submit">提交</button>
        </div>
    </form>

    <script>
        const price = document.querySelector("#price");
        const output = document.querySelector(".price-output");

        // 设置output 的 textContent的初试值为滑块的默认值
        output.textContent = price.value;

        //设置了一个事件监听器，确保每次范围滑块移动时，output 的 textContent 总是可以及时更新为新值。
        price.addEventListener("input", () => {
        
        
            output.textContent = price.value;
        });
    </script>
</body>
</html>

2.10 参考

3. output 标签（输出标签）

3.1 简单介绍

  • HTML <output> 标签表示计算或用户操作的结果。
  • 此元素的行为有两种模式：默认模式和值模式。
    • 默认模式：
      • 最初，元素处于默认模式，因此元素的内容表示元素的值及其默认值
      • 如果元素在以任何方式更改元素的后代时元素处于默认模式，则该 defaultValue 属性将设置为该 textContent 属性的值。
    • 值模式：
      • 设置 value 属性内容时，元素将进入值模式。该 value 属性在其他方面的行为与 textContent 该属性类似。当元素处于值模式时，只能通过 defaultValue 属性访问默认值。

3.2 其他属性 + 例子

3.2.1 form + name 属性例子

  • 关于form属性，MDN上是这么说的，但是我没看懂最后一句话，为啥又是后代属性又可以脱离怎么脱离？看懂的C友可以交流一下！
    在这里插入图片描述
  • name属性：
    定义对象的唯一名称（表单提交时使用）。
  • 例子1：
    <!-- 其中 oninput属性 指当前表单元素的值发生更改时要运行的脚本。 -->
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
    求和：
    <input type="number" name="a" value="50" /> +
    <input type="number" name="b" value="10" /> =
    <output name="result">60</output>
</form>
  • 例子2（在例子1的基础上简单加工一下）：
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
        <div>
            <label for="email">邮箱(email): </label>
            <input type="email" id="email" name="email2">
        </div>

        <div>
            求和：
            <input type="number" name="a" value="50" /> +
            <input type="number" name="b" value="10" /> =
            <output name="result" id="result">60</output>
        </div>

        <div style="margin-top: 50px;">
            <button id="submit" onclick="fn_submit()">提交</button>
        </div>
    </form> 

    <script>
        function fn_submit(){
        
        
            var result = document.getElementById("result").value;
            alert(result);
        }
    </script>
</body>
</html>
  • 例子2效果如下：
    在这里插入图片描述
    在这里插入图片描述

3.2.2 for属性例子

  • 定义输出域相关的一个或多个元素，以空格隔开。
  • 说明：==其实下面例子是监听等事件触发实现的，所以可以不用output标签，用了output标签也可以不加for属性依然能实现。==不过例子还是简单看看，主要可以看监听的实现，代码如下：
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
    <form>
        求积：
        <input type="number" id="number_1" name="add_nums" value="2" /> *
        <input type="number" id="number_2" name="add_nums" value="3" /> =
        <output class="number-output" for="number_1 number_2"></output>

        <br>
        简单测试监听2:
        <input type="text" id="test" oninput="test_monitor()" onpropertychange="test_monitor()" />
        <!-- <input type="text" id="output_monitor"></output> -->
        <output id="output_monitor"></output>
    </form>
    <script>
        const number_1 = $("#number_1").val();
        const number_2 = $("#number_2").val();
        const number_result = number_1 * number_2;

        // 1. output标签 结果初始化  注意：jQuery语法，用val，不用textContent
        $(".number-output").val(number_result);

        // 2. 给两个加数 添加监听
        // 2.1 jQuery实现
        $("input[name=add_nums]").on('input propertychange', function() {
        
        
            let number_result;
            if($(this).attr("id") === "number_1"){
        
        
                number_result = $(this).val() * $("#number_2").val();
                // $(".number-output").val($(this).val() * $("#number_2").val());
            }else{
        
        
                number_result = $(this).val() * $("#number_1").val();
            }
            console.log("积是：",number_result);
            $(".number-output").val(number_result);
        });

        // 2.2 使用oninput事件实现
        function test_monitor() {
        
        
            console.log($("#test").val());
            $("#output_monitor").val($("#test").val());
        }
    </script>
</body>
</html>
  • 效果如下：
    在这里插入图片描述

3.3 参考

猜你喜欢

转载自blog.csdn.net/suixinfeixiangfei/article/details/134929412
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022