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.
The hidden attribute syntax
<p hidden>The paragraph is hidden.</p>
<p hidden="hidden">The paragraph is also hidden.</p>
Key aspect and Characteristics
➔ The hidden attribute specifies that the element is no longer relevant to be displayed on the browser page..
➔ The hidden attribute can be applied to any visible HTML element.
➔ When the hidden attribute is applied to an element, the browser implements this purpose by using CSS display: none; Therefore the element is not only hidden but also removed from the DOM tree to free up the memory that the element took up.
➔ Screen readers and assistive technology ignore any hidden elements because their presence in the view has no relevance.
➔ The primary use case for the hidden property is to dynamically control the visibility of any element during user interaction, such as clicking a mouse button or using other events.
The hidden attribute example.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML hidden attribute example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content='charset=utf-8' />
</head>
<body>
<h2>HTML hidden attribute example</h2>
<p hidden>This paragraph is hidden.</p>
<p hidden="hidden">This paragraph is also hidden.</p>
<p>This paragraph is not hidden.</p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
HTML hidden attribute implemented by JavaScript syntax
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');
Differences between hidden strategies
➔ display: none; The element has been completely removed from DOM heirarchy.
➔ visibility: hidden; The element is hide but maintain the DOM heirarchy and layout.
The hidden attribute control dynamically example.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML hidden attribute example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content='charset=utf-8' />
<style>
.mydiv {
border: 2px solid black;
padding: 30px;
background: rgb(100, 100, 100, 0.3);
}
input {
padding: 3px;
margin: 5px 5px;
}
</style>
</head>
<body>
<div class="mydiv">
<h3>HTML hidden attribute example</h3>
<p>The hidden attribute is used to specifies an element should not be displayed.</p>
<input type="text" id="name" name="name" placeholder="Enter your name"><br>
<input type="text" id="email" name="email" placeholder="Enter your email"><br>
<button type="button" id='btn1' onclick="m1()">Hide name</button>
<button type="button" id='btn2' onclick="m2()">Hide email</button><br>
</div>
</body>
<script>
let name = document.querySelector('#name');
let email = document.querySelector('#email');
let btn1 = document.querySelector('#btn1');
let btn2 = document.querySelector('#btn2');
function m1() {
if (name.style.visibility === "hidden") {
name.style.visibility = "visible";
btn1.textContent = "Hide Name";
} else {
name.style.visibility = "hidden";
btn1.textContent = "Show Name";
}
}
function m2() {
if (email.style.visibility === "hidden") {
email.style.visibility = "visible";
btn2.textContent = "Hide Email";
} else {
email.style.visibility = "hidden";
btn2.textContent = "Show Email";
}
}
</script>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
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.