HTML Hide Element

You can hide an element by using the Boolean attribute hidden with the element. When you specify the hidden attribute in the HTML file, then the browser will not display that element, which is specified with this attribute.

Syntax

Examples:T he following examples are specified to understand easily how to use the hidden attribute with different elements or tags:

Example 1: This example uses the hidden attribute with the paragraph tag.

<!DOCTYPE html>
<html>
<head>
<title> 
First Example of Hidden attribute
</title>
</head>
<body>
<center>
<h1> JavaTpoint </h1>
</center>
<p hidden> This paragraph should be hidden.
</p>
</body>
</html>

Test it Now

Output:

Example 2: The following example uses the hidden attribute with the <input type=text> element.

In this example, we have used the hidden attribute with two input tags. These input fields will not display on the web page, when the following program executes.

<!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>

Test it Now

Output: