- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
<!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 −
- Related Articles
- HTML DOM Input Hidden Object
- HTML DOM Input Hidden name Property
- HTML DOM Input Hidden type Property
- HTML DOM Input Hidden value Property
- HTML DOM Input Hidden form Property
- How to create hidden comments in HTML?
- HTML checked Attribute
- HTML datetime Attribute
- HTML value Attribute
- HTML coords Attribute
- HTML hreflang Attribute
- HTML cite Attribute
- HTML cite Attribute
- HTML autocomplete Attribute
- HTML max Attribute

Advertisements