HTML | DOM Input Hidden Object

Last Updated : 15 Apr, 2019

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> 
<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.

<!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>                    

Output:
Before Clicking On Button:

After Clicking On Button:

Supported Browsers: The browser supported by DOM Input Hidden Object are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Related Articles