HTML Hide Element

The HTML hide element is used to hide the element. We place the hidden attribute inside those elements which we want to hide. The hidden attribute is a Boolean attribute.

The elements with the hidden attribute are not displayed on the web page. We can apply conditions to see the hidden element. The user can see the hidden element if the specified conditions are met.

The hidden attribute is a Global attribute. We can use hidden attribute on any HTML element.

Syntax:

<element_name hidden> some text </element>

Examples of HTML Hide Element:

Example1:

We use the hidden attribute inside the <p> tag to hide the paragraph.

<!DOCTYPE html>  
<html>  
<head>  
<title> Example 1 of Hide Element </title>  
</head>  
<body bgcolor="lightpink">  
<center>  
<h1> Hidden Element </h1>  
</center>  
<div>
<p hidden> This paragraph should be hidden. </p>  
</div>
</body>  
</html>

Output:

The output displays only the heading tag and hides the paragraph element.

Example 2:

This example illustrates the use of hidden attribute inside the <div> element.

<!DOCTYPE html>  
<html>  
<head>  
<title> Example 2 of Hide Element </title>  
</head>  
<body bgcolor="orange">  
<center>  
<h1> Hiding the div element </h1>  
</center>  
<div hidden>
<p> This is the div element. </p>  
</div>
<p> Above is the div element, which is not visible. </p>
</body>  
</html>

Output:

The output shows heading element and paragraph element but hides <div> element because we have used hidden attribute inside <div> element.

Example 3:

We are using hidden attribute inside the input elements labeled with first name and phone number which hide both the input fields.

<!DOCTYPE html>  
<html>  
<head>  
<title> Example 3 of Hide Element </title>  
<style>
body {  
font-family: Arial, Helvetica, sans-serif;  
background-color: olive;  
}   
.container {  
padding: 50px;  
background-color: rgb(231, 231, 164);  
}  
input[type=text] {  
  padding: 12px; 
  width: 100%;  
  border: none;  
  margin: 2px 0 20px 0;  
  background: #a3eaea;  
}  
input[type=text]:focus {  
background-color: rgb(188, 229, 242);  
outline: none;
}  
</style>
</head>  
<body bgcolor="cyan">  
<center>  
<h1> Hiding the input element of the form </h1>  
</center>  
<form class="container"> 
    <label for="fname"> First Name: </label>  <input type="text" name="firstname" value="First name" hidden>
    <br> 
    <br>
    <label for="lname"> Last Name: </label>  
    <input type="text" name="lastname" value="Last name">
    <br>
    <br>
    <label for="Email-id"> Email Id: </label> 
    <input type="text" name="Email-id" value="Email-id">
    <br>
    <br>
    <label for="employee-id"> Employee Id: </label>
    <input type="text" name="Employee-id" value="Employee-id">
    <br>
    <br>
    <label for="Gender"> Gender: </label>
    <select name="Gender">
        <option value="male"> MALE </option>
        <option value="female"> FEMALE </option>
        <option value="other"> OTHER </option>
    </select>
    <br>
    <br>
    <label for="phone"> Phone Number: </label>
    <input type="text" name="phone" value="Phone Number" hidden>
    <br>
    <br>
   <button type="submit"> SUBMIT </button>
   <button type="reset"> RESET </button>
  </form>
</body>  
</html>

Output:

As you can see, both the input elements are hidden, and only the label of both elements is visible.

Browser Support:

It supports the following browsers:

• Google Chrome
• Opera
• Mozilla Firefox
• Internet Explorer
• Safari