HTML | DOM Input Hidden Object

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

Recommended Posts: