Due to development requirements, I have previously found a method for restricting input values on pages that have been around for a long time.
    
    Usually, regular expressions are used to determine whether the input string conforms to the numerical specifications.
    
    The verification of JS input content has been used for a long time, but it is difficult to turn off the control of input methods.
    
    Years, years later, The Web3.0 era has reached the specifices of input restricting. So, let's have a look at native browser input controls for date selection, native input control controls for numerical input, and so on.
    
    <Input type="text" placeholder="text">
    
    <Input type="password" placeholder="password">
    
    <Input type="search" placeholder="search">;
    
    <Input type="tel" placeholder="phone">
    
    <input type="url" placeholder="URL">
    
    <Input type="email" placeholder="email">
    
    <Input type="number" placeholder="number" min="1" max="10" step="0.01">;
    
    Method to remove spin:
    <Input type="number" class="no pin" placeholder="number" min="1" max="10">
    .no-spin{
        -moz-appearance:textfield;/* Removing spin in Firefox*/
    }
    .no-spin::-webkit-inner-spin-button,.no-spin::-webkit-outer-spin-button{
        -webkit-appearance: none! Important;/* Remove spin in Chrome and Edge*/
    }
    
    <input type="range" min="1" max="10">
    
    <input type="date">
    
    <Input type="timestamp local">(Firefox supports, but time part support is not user-friendly)
    
    <Input type="month">(not supported by Firefox)
    
    <Input type="week">(not supported by Firefox)
    
    <Input type="time">(Firefox supports, but support is not friendly)
    
    <input type="checkbox">
    
    Checkbox<Input type="radio" name="group1">radio button 1radio button 2
    Checkboxradio button 1radio button 2
    
    Single choosing file button, limited to PNG, JPEG, and JPG: <input type="file" id="fileChooseInput" accept="image/png, image/jpeg, image/jpg">
    
    
    Button for uploading a single file:Upload image
    
    Identify file type before uploading a single file: <button onclick="alertFileType()">Upload Image</button>;
    <script>
    function alertFileType() {
        const fileChooseInput = document.getElementById('fileChooseInput');
        const files = fileChooseInput.files;
        for (let i = 0;  i <files.length; i++) {
            const file = files[i];
            console.log ('filename: ', file. name);
            console.log ('file size: ', file. size);
            console.log ('file type: ', file. type);
            alert ('The file type of the file you have selected is:'+file. type+'(file extension only)');
        }
    }
    </script>
    
    <input type="color">
    
    <Input type="button" value="button">
    
    <Input type="submit" value="submit">;
    
    <Input type="reset" value="reset">;
    
    <input type="image" src="../ Img/website-icon.svg "alt=" image button ">
    
    
    Turn around in the falling autumn, looking little up at the yellow luminous streetlight, the date picker has already been a disappearing cloud ~ ~ ~
    
    ---- www.v-signon.com Learningers Co-Encouraged