HTML5 new features: HTML5 input type (h5 can achieve the coolness you want without vue)

Mobile 2023-12-16 23:24:24 views: null

HTML5 new features: HTML5 input type (h5 can achieve the coolness you want without vue)

1 Introduction

1.1 label label

  • First of all, let’s introduce the <label> tag that will appear below. This is not a new feature of h5, so I will only briefly mention it here. If you know about children’s shoes, you can skip it.
  • label The purpose of the label is to improve usability for mouse users.When the user clicks on the text in the label label, the browser will automatically turn the focus to the control associated with the label.. Usually written in a form.
  • Two ways of association:
    • Explicit association
      To explicitly associate the <label> element with the <input> element, you first need to set <input> element a>id 属性. Next, add for 属性 to the <label> element, where the value of for is the same as the <input> element The values ​​of id属性 are the same. 
      <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>
      Insert image description here
    • implicit association
      You can directly nest <input> in <label> , in this case the for and id attributes are not needed because the association is implicit , as follows:
      <label>
   Do you like peas?
   <input type="checkbox" name="peas" />
</label>

2. h5 form control properties (input type)

2.1 E-mail address field

  • code show as below:
    <div>
   <label for="email">邮箱(email): </label>
   <input type="email" id="email" name="email">
</div>
  • The effect of automatic verification is as follows:
    Insert image description here
    Insert image description here

2.2 Phone number field

  • code show as below:
    <input type="tel" id="telphone" name="telphone">
  • You can see the effect on the mobile terminal. For more details, please see what the official website says. Directly give the official website picture:
    Insert image description here

2.3 URL field

  • code show as below:
    <input type="url" id="url" name="url">
  • The effect is as follows:
    Insert image description here

2.4 Numeric fields

  • code show as below:
    • Example 1: Create a number picker that selects values ​​from 1 to 121, and the value increases or decreases by 2 on a single click of the button.
      <input type="number" name="oddNumber" id="oddNumber" min="1" max="121" step="2" />
    • Example 2: Create a number selector that can select a value from 0 to 1, and the value increased or decreased by clicking the button once is 0.01.
      <input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />
  • Effect:
    Insert image description here
  • illustrate:
    • Usually withspinnerThe form provides buttons to increase and decrease the value of the control. On devices with dynamic keyboards, a numeric keypad is usually displayed.
    • Using the number input type, you can control the minimum and maximum values ​​allowed for input using the min and max attributes.
    • you can alsoUse the step attribute to set the value to increase or decrease each time the spinner button is pressed.. By default, the number input type only allows integer value input,To allow floating point input, specify step="any" (en-US). If this value is omitted, step defaults to 1, meaning that only natural numbers are valid input.
    • The number input type makes sense when there is a limited range of valid values, such as a person's age or height. If the range is so large that incremental increments don't make sense (such as US ZIP codes ranging from 00001 to 99999), it may be better to use the tel type.

2.5 Query fields

  • code show as below:
    <input type="search" id="search" name="search" />
  • The effect is as follows:
    Insert image description here
    Insert image description here
  • illustrate:
    • The main difference between text fields and search fields is the appearance given to them by the browser. Typically, the search field has a rounded border and sometimes displays a "Ⓧ" sign, which clears the input box when clicked.
    • Additionally, on dynamic keyboard devices, the keyboard's Enter key displays "search" or appears as a magnifying glass icon.
    • The clear icon "Ⓧ" will only be displayed if there is a value in the input box.
    • Some other browsers, and unlike Safari, only display the "Ⓧ" icon when focused.
    • Another feature worth mentioning is that the value of the search field can be automatically saved and reused in the autocomplete box on the same website. This feature tends to be automatic in most modern browsers.

2.6 Date and time picker

2.6.1 Several different types

  • It's very simple, just look at the code
     <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>
  • Let’s look at the general effect
    Insert image description here

2.6.2 Set the default time value

  • You can put a value containing a date and time in the value property to set a default value for the control (Pay attention to the format of the value setting below.),code show as below:
    <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>
    Insert image description here

2.6.3 Set the maximum and minimum values ​​of date and time

  • You can use the min and max attributes to limit the dates/times the user can select. In the following example we set the minimum date and time 2017-06-01T08:30 and the maximum date and time 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>
    Insert image description here

2.6.4 Regarding format issues (dealing with browser support)

  • Please refer to the following address:
    https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/datetime-local.
  • If the format is not supported by the browser or there are other problems, you can use jQuery'sDatepicker
    https://jqueryui.com/datepicker/.
    • The jQuery code is as follows:
      <!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>
    • The effect is as follows:
      Insert image description here

2.7 Color picker control

  • Colors are always a little tricky to work with. There are many ways to express them, such as RGB values ​​(decimal or hexadecimal), HSL values, keywords, etc.
    A control for entering a color can be created from type for an element of color, code As follows:<input>
    <input type="color" name="color" id="color" />
  • The effect is as follows:
    Insert image description here
  • Description:
    The return value is always a lowercase 6-digit hexadecimal representation of the color. For example:#395cac
    Insert image description here

2.8 Slider control

2.8.1 About the slider control description

  • This is another kindHow to choose numbersIs using a slider. You see this a lot on sites like home buying sites, where you want to set a maximum property price to filter by.
  • In terms of use, sliders are less accurate than text fields. Therefore, they are used to pick numbers whose exact value is not necessarily that important.
  • Use as the value of attribute in the <input> element to create a slider. rangetypeCan be moved by mouse, touch, or using keyboard arrow keys。
  • It is very important to configure the slider component correctly. It is recommended to configure the min (en-US), max (en-US) and step (en-US) attributes respectively to set The minimum, maximum, and incremental values ​​of the slider.

2.8.2 Simple example

  • code show as below:
    <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>
  • The effect is as follows:
    Insert image description here
  • Please read below about the tags used above<output>...

2.9 Attachment: All the above codes

  • as follows:
    <!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 Reference

3. output tag (output tag)

3.1 Brief introduction

  • The HTML <output> tag represents the result of a calculation or user action.
  • This element behaves in two modes: default mode and value mode.
    • Default mode:
      • Initially, the element is in default mode, so the content of the element represents the value of the element and its default value
      • If the element is in default mode when the element's descendants are changed in any way, the defaultValue attribute will be set to the value of that textContent 属性.
    • Value pattern:
      • When sets value 属性 content, the element will enter value mode. The value attribute otherwise behaves like the textContent attribute. When the element is in value mode, the default value can only be accessed through the defaultValue attribute.

3.2 Other properties + examples

3.2.1 form + name attribute example

  • Regarding the form attribute, MDN says this, but I didn’t understand the last sentence.Why can I break away from the descendant attribute? How can I break away from it? C friends who understand can share it!
    Insert image description here
  • name attribute:
    Defines the unique name of the object (used when the form is submitted).
  • Example 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>
  • Example 2 (simple processing based on Example 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>
  • The effect of Example 2 is as follows:
    Insert image description here
    Insert image description here

3.2.2 Example of for attribute

  • Define one or more elements related to the output domain, separated by spaces.
  • Note: ==In fact, the following example is implemented by monitoring and other event triggers, so the output tag can be used without the output tag. The output tag can also be implemented without adding the for attribute. ==But let’s take a brief look at the example. You can mainly look at the implementation of monitoring. The code is as follows:
    <!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>
  • The effect is as follows:
    Insert image description here

3.3 Reference

Guess you like

Origin blog.csdn.net/suixinfeixiangfei/article/details/134929412
Recommended
TIOBE May list: Fortran “resurrected” into Top 10
GCC 14.1 released
Ranking
B. Little Girl and Game【1300 / 回文字符串 博弈论】
CIKERS Shane 20190613
"Javascript advanced programming" study notes - the constructor and prototype
beeline hiveserver2 start
springboot - Automatically backup mysql data every day
Data Storage Full Solution--Detailed Persistence Technology
Detailed Explanation of Spring Web MVC DispatcherServlet—Official Original
TCP / IP protocol layers structure and function
Command type literal pos: unknown； Fallback type literal pos: unknown] with root cause
Design of multifunctional curtain controller with indoor anti-theft alarm
Daily
More
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)

Code World

© 2018 codetd.com