HTML hidden एट्रिब्यूट: एलिमेंट्स को छिपाना और दिखाना

HTML hidden एट्रिब्यूट उपयोगकर्ता को सूचित करता है कि इस एट्रिब्यूट वाला एलिमेंट अब दस्तावेज़ के लिए प्रासंगिक नहीं है और उपयोगकर्ता को दिखाई नहीं देना चाहिए। ब्राउज़र ऐसे एलिमेंट्स को रेंडर नहीं करते।

उदाहरण: प्राधिकरण स्तर के आधार पर मेनू दिखाना

<!DOCTYPE html>
<html>
<head>
  <title>HTML hidden एट्रिब्यूट</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-एट्रिब्यूट</legend>
      <input type="text" id="textSelect" placeholder="आपका प्राधिकरण स्तर">
      <select id="selection1" hidden>
        <option>उपयोगकर्ता जोड़ें</option>
        <option>उपयोगकर्ता हटाएं</option>
        <option>उपयोगकर्ता संशोधित करें</option>
      </select>
      <select id="selection2" hidden>
        <option>एडमिन को मेल करें</option>
        <option>एडमिन को कॉल करें</option>
      </select>
      <input type="button" value="जाओ" onclick="displaySelection()">
      <div id="divDisplay">नमस्ते</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 = 'स्वागत है एडमिन';
      } else if (textSelect.value === 'user') {
        selection2.hidden = false;
        selection1.hidden = true;
        divDisplay.textContent = 'स्वागत है उपयोगकर्ता';
      } else {
        selection2.hidden = true;
        selection1.hidden = true;
        divDisplay.textContent = 'आपका इनपुट किसी प्राधिकरण से मेल नहीं खाता';
      }
    }
  </script>
</body>
</html>

आउटपुट परिदृश्य

1. उपयोगकर्ता प्राधिकरण के साथ 'जाओ' क्लिक: "उपयोगकर्ता" मेनू दिखाता है (मेल/कॉल एडमिन)
2. एडमिन प्राधिकरण के साथ 'जाओ' क्लिक: "एडमिन" मेनू दिखाता है (जोड़ें/हटाएं/संशोधित करें)
3. अनधिकृत स्तर के साथ 'जाओ' क्लिक: दोनों मेनू छिपे रहते हैं, त्रुटि संदेश

hidden एट्रिब्यूट के महत्वपूर्ण बिंदु

• बूलियन एट्रिब्यूट: उपस्थिति मायने रखती है, मान नहीं (hidden या hidden="hidden")
• CSS विकल्प: display: none समान प्रभाव देता है लेकिन hidden अधिक सिमेंटिक है
• एक्सेसिबिलिटी: स्क्रीन रीडर्स hidden एलिमेंट्स को छोड़ देते हैं
• जावास्क्रिप्ट नियंत्रण: element.hidden = true/false से टॉगल करें
• फॉर्म सबमिशन: hidden फॉर्म फील्ड्स सबमिट होते हैं (यदि disabled नहीं)

hidden vs display: none vs visibility: hidden