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

2023-12-13 14:55:18

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 参考

上面部分例子参考来源于MDN网站，如下：
https://developer.mozilla.org/zh-CN/docs/Web/HTML.

https://developer.mozilla.org/zh-CN/docs/Learn/Forms/HTML5_input_types.

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 参考

关于此标签的更多参考，请看：
https://developer.mozilla.org/en-US/docs/Web/API/HTMLOutputElement.

文章来源:https://blog.csdn.net/suixinfeixiangfei/article/details/134929412
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！