HTML hidden Attribute


The HTML hidden attribute is used to communicate to the user that element with hidden attribute is no longer relevant to the document and should not be visible to the user.

Let us see an example of hidden attribute −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>HTML hidden attribute</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-hidden-attribute</legend>
<input type="text" id="textSelect" placeholder="Your Authorization Level">
<select id="selection1" hidden>
<option>Add user</option>
<option>Delete user</option>
<option>Modify user</option>
</select>
<select id="selection2" hidden>
<option>Mail admin</option>
<option>Call admin</option>
</select>
<input type="button" value="go" onclick="displaySelection()">
<div id="divDisplay">Hello</div>
</fieldset>
</form>
<script>
   var textSelect = document.getElementById("textSelect");
   var divDisplay = document.getElementById("divDisplay");
   var selection1 = document.getElementById("selection1");
   var selection2 = document.getElementById("selection2");
   function displaySelection() {
      if(textSelect.value === 'admin'){
         selection1.hidden = false;
         selection2.hidden = true;
         divDisplay.textContent = 'Welcome Admin';  
      } else if(textSelect.value === 'user'){
         selection2.hidden = false;
         selection1.hidden = true;
         divDisplay.textContent = 'Welcome User';
      } else{
         selection2.hidden = true;
         selection1.hidden = true;
         divDisplay.textContent = 'Your input does not match any authorization';
      }
   }
</script>
</body>
</html>

1) Clicking ‘Go’ button with user authorization level −

2) Clicking ‘Go’ button with admin authorization level −

3) Clicking ‘Go’ button with unauthorized level −

Updated on: 19-Sep-2019

326 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements