To conceal an element, you can utilize the hidden Boolean attribute within the element. By including the hidden attribute in the HTML document, the designated element will not be visible in the browser.
Syntax
Example
<element or tag hidden> Any statement or content </element or tag>
Illustrations: The subsequent instances are outlined to facilitate comprehension of how to employ the hidden attribute with various elements or tags:
Illustration 1: In this instance, the hidden attribute is employed alongside the paragraph tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>
First Example of Hidden attribute
</title>
</head>
<body>
<center>
<h1> C# Tutorial </h1>
</center>
<p hidden> This paragraph should be hidden.
</p>
</body>
</html>
Output:
Illustration 2: In this instance, the hidden attribute is applied to the specified <input type=text> element.
In this instance, we have employed the hidden attribute with a pair of input elements. These input fields will remain invisible on the webpage upon execution of the provided code.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Example of Hidden attribute in input tag
</title>
<style>
/* The following tag selector body use the font-family and background-color properties for body of a page*/
body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
/* Following container class used padding for generate space around it, and also use a background-color for specify the color lightblue as a background */
.container {
padding: 50px;
background-color: lightblue;
}
/* The following tag selector input use the different properties for the text filed. */
input[type=text] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
input[type=text]:focus {
background-color: orange;
outline: none;
}
/* The following div tag selector is used to provide the space or gap between the content or elements on a web page. */
div {
padding: 10px 0;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
</style>
</head>
<body>
<form>
<div class="container">
<center> <h1> Registration Form</h1> </center>
<hr>
<label for="fn"> Firstname: </label>
<!-- The following input field not display on the web page because the hidden attribute is used in this <input> tag. -->
<input hidden type="text" name="firstname" id= "fn" size="15" required />
<div>
<label for="mn"> Middlename: </label>
<input type="text" name="middlename" id="mn" size="15" required />
</div>
<label for="Ln"> Lastname: </label>
<input type="text" name="lastname" id="Ln" size="15"required />
<label for="pn">
Phone :
</label>
<input type="text" name="country code" placeholder="Country Code" value="+91" size="2"/>
<!-- The following input field not display on the web page because it is also use the hidden attribute-->
<input hidden type="text" name="phone" id="pn" size="10"/ required>
</hr>
</div>
</form>
</body>
</html>
Output:
Browser Support
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<tag hidden> |
6.0 | 11.0 | 4.0 | 11.1 | 5.1 |