Skip to content
Related Articles

Related Articles

HTML | DOM Input Hidden Object

View Discussion
Improve Article
Save Article
  • Last Updated : 31 Aug, 2022
View Discussion
Improve Article
Save Article

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>                   

Output: 
Before Clicking On Button: 
 

After Clicking On Button: 
 

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

  • Google Chrome 1
  • Edge 12
  • Firefox 1
  • Opera 2
  • Safari 1

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!