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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
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
