HTML | DOM Input Hidden Object

Last Updated : 31 Aug, 2022

The Input Hidden object in HTML DOM represents the <input> element with type = “hidden” attribute. The element can be accessed by using getElementById() method.
Syntax:

document.getElementById("id");

where id is assigned to the <input> tag.
Property Values:

defaultvalue: It is used to set or return the default value of a hidden input field.
form: It returns the reference of form that contains the hidden input field.
name: It is used to set or return the name attribute value of a hidden input field.
type: It returns the type of form element the hidden input field belongs.
value: It is used to set or return the value of the value attribute of a hidden input field.

Example 1: This example describes the getElementById() method to access the <input> element with type = "hidden" attribute.

html

<html>
<head>
<title> DOM Input Hidden Object </title>
</head>
<body>
    <center>
        <h1 style = "color:green;">
            GeeksForGeeks
        </h1>
        
        <h2>DOM Input Hidden Object</h2>
        
        <input type = "hidden" id = "myGeeks"
                    value="GeeksForGeeks">
        
        <button onclick = "Geeks()">
            Submit
        </button>
        
        <p id = "sudo"></p>


        
        <script>
            function Geeks() {
                var g = document.getElementById("myGeeks").value;
                document.getElementById("sudo").innerHTML = g;
            }
        </script>
    </center>
</body>

</html>

Output:
Before Click on the Button :

After Click on the Button :

Example 2: Input Hidden Object can be created by using the document.createElement method.

html

<!DOCTYPE html>
<html>
    
<head>
    <title>
        DOM Input Hidden Object
    </title>
</head>

<body>
    <center>
        <h1 style = "color:green;">
            GeeksForGeeks
        </h1>
        
        <h2>DOM Input Hidden Object</h2>
        
        <input type = "hidden" id = "myGeeks"
                    value="GeeksForGeeks">
        
        <button onclick = "Geeks()">
            Submit
        </button>
        
        <p id = "sudo"></p>


        
        <script>
            function Geeks() {
                var g = document.createElement("INPUT");
                g.setAttribute("type", "hidden");
                document.body.appendChild(g);
                
                document.getElementById("sudo").innerHTML
                        = "Hidden Content";
            }
        </script>
    </center>
</body>

</html>