Skip to content
Related Articles

Related Articles

HTML | DOM Input Hidden Object
  • Last Updated : 15 Apr, 2019
GeeksforGeeks - Summer Carnival Banner

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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :