HTML5 Input Types pt.2

File

A control for selecting a file.

We can define the accept attribute to only allow specific file types eg. <input type="file" accept=".pdf" />.

<!DOCTYPE html>
<html>
    <head>
        <title> Input File </title>
    </head>
    <body>
        <input type="file" id="demo" onchange="readFile();" />
        <!-- you should pick all image file for this demo to work -->
        <img src="" alt="The image file will be shown here." id="result" />

        <script type="text/javascript">
        function readFile(){
            var reader = new FileReader();
            var file = document.getElementById('demo').files[0];

            reader.onload = function(e) {
                document.getElementById('result').src = e.target.result;
            }
           
            reader.readAsDataURL(file);
        }
        </script>
    </body>
</html>

Hidden

A text field that is not shown in the browser.

<!DOCTYPE html>
<html>
    <head>
        <title> Input Hidden </title>
    </head>
    <body>
        <input type="hidden" value="Lorem Ipsum!" id="demo" />
        <br />
        <button onclick
  ="getValue()"> Get Value </button>

        <script type="text/javascript">
        function getValue(){
            alert(document.getElementById('demo').value)
        }
        </script>
    </body>
</html>

Month

HTML5. A control for entering a month and year.

<!DOCTYPE html>
<html>
    <head>
        <title> Input Month </title>
    </head>
    <body>
        <input type="month" id="demo" />
        <br />
        <button onclick="getValue()"> Get Value </button>

        <script type="text/javascript">
        function getValue(){
            alert(document.getElementById('demo').value)
        }
        </script>
    </body>
</html>

Number

HTML5. A text field for entering a number and some characters. If the form is submitted and the number provided is not valid the user will be warned.

<!DOCTYPE html>
<html>
    <head>
        <title> Input Number </title>
    </head>
    <body>
        <form action="sample-page-handler.html">
            <input type="number" id="demo" />
            <input type="submit" />
        </form>
        <br />
        <button onclick="getValue()"> Get Value </button>
        <script type="text/javascript">
        function getValue(){
            alert(document.getElementById('demo').value)
        }
        </script>
    </body>
</html>

Password

A single-line text field whose value is obscured.

<!DOCTYPE html>
<html>
    <head>
        <title> Input Password </title>
    </head>
    <body>
        <input type="password" id="demo" />
        <br />
        <button onclick="getValue()"> Get Value </button>

        <script type="text/javascript">
        function getValue(){
            alert(document.getElementById('demo').value)
        }
        </script>
    </body>
</html>

Radio

A radio button, allowing a single value to be selected out of multiple choices.

<!DOCTYPE html>
<html>
    <head>
        <title> Input Password </title>
    </head>
    <body>
        <input type="radio" name="gender" value="Male" id="male" />
        <label for="male"> Male </label>
        <br 
              />
        <input type="radio" name="gender" value="Female" id="female" />
        <label for="female"> Female </label>
        <br />
        <button onclick="getValue()"> Get Value </button>

        <script type="text/javascript">
        function getValue(){
            var radios = document.getElementsByName('gender');
            var number_of_radios = radios.length;

            for(var i=0; i < number_of_radios; i++) {
                if(radios[i].checked) {
                    alert(radios[i].value);
                }
            }
        }
        </script>
    </body>
</html>

😃Feedback ⚠Report