HTML hidden অ্যাট্রিবিউট ব্যবহারকারীকে জানাতে ব্যবহৃত হয় যে hidden অ্যাট্রিবিউটযুক্ত এলিমেন্টটি ডকুমেন্টের জন্য আর প্রাসঙ্গিক নয় এবং ব্যবহারকারীর কাছে দৃশ্যমান হওয়া উচিত নয়।
উদাহরণ
hidden অ্যাট্রিবিউটের একটি উদাহরণ:
<!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>
১) ইউজার অথরাইজেশন লেভেলে 'Go' বাটনে ক্লিক করলে:
২) অ্যাডমিন অথরাইজেশন লেভেলে 'Go' বাটনে ক্লিক করলে:
৩) অনধিকৃত লেভেলে 'Go' বাটনে ক্লিক করলে:
