Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Hidden Object
The HTML DOM Input Hidden Object represents an <input> element with type="hidden" in an HTML document. Hidden input fields are invisible to users but store data that gets submitted with forms, making them useful for maintaining state information, tokens, or IDs.
Syntax
Following is the syntax to create an input hidden object −
var hiddenInput = document.createElement("INPUT");
hiddenInput.setAttribute("type", "hidden");
You can also access an existing hidden input element −
var hiddenInput = document.getElementById("hiddenFieldId");
Properties
Following are the properties of HTML DOM Input Hidden Object −
| Property | Description |
|---|---|
| form | Returns a reference to the form that contains the hidden input field. |
| name | Sets or returns the value of the name attribute of the hidden input field. |
| type | Returns the type of the input element (always "hidden" for hidden inputs). |
| defaultValue | Sets or returns the default value of the hidden input field. |
| value | Sets or returns the current value of the hidden input field. |
| disabled | Sets or returns whether the hidden input field is disabled. |
Creating a Hidden Input Field
Following example demonstrates how to create a hidden input field using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Create Hidden Input Field</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Create Hidden Input Field</h2>
<form id="myForm" action="#" method="post">
<input type="text" name="username" placeholder="Enter username" style="padding: 8px; margin: 5px;">
<br><br>
<button type="button" onclick="addHiddenField()">Add Hidden Field</button>
<button type="submit">Submit Form</button>
<div id="output" style="margin-top: 15px; color: green;"></div>
</form>
<script>
function addHiddenField() {
var hiddenInput = document.createElement("INPUT");
hiddenInput.setAttribute("type", "hidden");
hiddenInput.setAttribute("name", "userId");
hiddenInput.setAttribute("value", "12345");
hiddenInput.setAttribute("id", "hiddenUserId");
document.getElementById("myForm").appendChild(hiddenInput);
document.getElementById("output").innerHTML = "Hidden field added with value: " + hiddenInput.value;
}
</script>
</body>
</html>
The output shows a form with a text field. Clicking "Add Hidden Field" creates a hidden input with value "12345" −
Create Hidden Input Field [Username field] [Add Hidden Field] [Submit Form] Hidden field added with value: 12345
Accessing Hidden Input Properties
Following example shows how to access and modify properties of an existing hidden input field −
<!DOCTYPE html>
<html>
<head>
<title>Access Hidden Input Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Hidden Input Properties</h2>
<form id="dataForm">
<input type="hidden" id="sessionId" name="session" value="abc123" />
<input type="text" name="email" placeholder="Enter email" style="padding: 8px; margin: 5px;">
<br><br>
<button type="button" onclick="showProperties()">Show Hidden Field Info</button>
<button type="button" onclick="updateValue()">Update Hidden Value</button>
</form>
<div id="info" style="margin-top: 15px; background: #f0f0f0; padding: 10px; border-radius: 5px;"></div>
<script>
function showProperties() {
var hidden = document.getElementById("sessionId");
var info = "Name: " + hidden.name + "<br>" +
"Value: " + hidden.value + "<br>" +
"Type: " + hidden.type + "<br>" +
"Default Value: " + hidden.defaultValue;
document.getElementById("info").innerHTML = info;
}
function updateValue() {
var hidden = document.getElementById("sessionId");
hidden.value = "xyz789";
document.getElementById("info").innerHTML = "Hidden field value updated to: " + hidden.value;
}
</script>
</body>
</html>
The output displays information about the hidden field and allows updating its value −
Hidden Input Properties [Email field] [Show Hidden Field Info] [Update Hidden Value] Name: session Value: abc123 Type: hidden Default Value: abc123
Toggling Input Type
Following example demonstrates toggling between hidden and text input types −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Input Type</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center; background-color: #f5f5f5;">
<h2>Toggle Hidden/Text Input</h2>
<input type="text" id="toggleField" placeholder="Enter your name" style="padding: 10px; border: 2px solid #007acc; border-radius: 5px; margin: 10px;">
<br>
<button onclick="toggleVisibility()" style="background-color: #007acc; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">Toggle Visibility</button>
<p id="status" style="margin-top: 15px; font-weight: bold;">Current type: text (visible)</p>
<script>
function toggleVisibility() {
var inputField = document.getElementById("toggleField");
var status = document.getElementById("status");
if (inputField.type === 'text') {
inputField.type = 'hidden';
status.innerHTML = "Current type: hidden (invisible)";
status.style.color = "red";
} else {
inputField.type = 'text';
status.innerHTML = "Current type: text (visible)";
status.style.color = "green";
}
}
</script>
</body>
</html>
The output shows an input field that can be toggled between visible and hidden states −
Toggle Hidden/Text Input [Input field - visible or invisible based on state] [Toggle Visibility] Current type: text (visible) / Current type: hidden (invisible)
Common Use Cases
Hidden input fields are commonly used for −
Session tokens − Storing authentication tokens for security.
Form state − Maintaining form data across multiple pages.
IDs − Passing record IDs for database operations.
Configuration data − Storing application settings or preferences.
Conclusion
The HTML DOM Input Hidden Object provides an essential way to store invisible data in forms that gets submitted to the server. It supports standard properties like name, value, and form, making it useful for maintaining state information, security tokens, and other data that users shouldn't directly interact with.
511 Views
