The HTML hidden attribute is used to specifies an element should not be displayed by browser.
Definition and Usage
➔ The element is completely removed from the page.
➔ Note: Inside the form element <input type="hidden"> is a hidden form control that is used to restrict users from viewing or changing data when submitting the form to the server. The data is still submitted with the form.
Syntax
//In HTML
<h4><i>This is visible text.</i> <i hidden>This is hidden text</i></h4>
<form action="/server-side" method="get">
<table>
<tr>
<td>ID:</td>
<td><input hidden type="text" id="id" name="id" value="CS01-9093"></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="name" placeholder="Enter your name"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea id="comment" name="comment" cols='55'
rows='5'>Note: The ID input is hidden inside the form but participates in submitting data with the form.</textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
//In JavaScript
const element = document.getElementById("id");
element.hidden=true;
element.setAttribute("hidden",'true');
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| hidden | <Global Attributes> |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML hidden attribute example</title>
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
input {
padding: 3px;
}
button {
margin: 10px 75px;
padding: 3px;
}
</style>
</head>
<body onsubmit="submit(event)">
<div id="sample" class="mydiv">
<h3>HTML hidden attribute example</h3>
<p>The hidden attribute is used to specifies an element should not be displayed.</p>
<h4><i>This is visible text.</i> <i hidden>This is hidden text</i></h4>
<form action="/server-side" method="get">
<table>
<tr>
<td>ID:</td>
<td><input hidden type="text" id="id" name="id" value="CS01-9093"></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" id="name" name="name" placeholder="Enter your name"></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea id="comment" name="comment" cols='55'
rows='5'>Note: The ID input is hidden inside the form but participates in submitting data with the form.</textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</div>
<p>Note: This form submission will not be processed by the server. </p>
</body>
<script>
function submit(e) {
e.preventDefault();
let id = e.target.id.value
let name = e.target.name.value;
let comment = e.target.comment.value;
alert("Form is submitted.\n" + "ID: " + id + "\nName: " + name + "\nComment: " + comment);
}
</script>
</html>
Click on the "Try it Now" button to see how it works.