แอตทริบิวต์ hidden ใน HTML: ซ่อนเอลิเมนต์อย่างมีความหมาย

แอตทริบิวต์ hidden คืออะไร?

แอตทริบิวต์ hidden (Boolean Attribute) ใน HTML5 ใช้บอกเบราว์เซอร์ว่าเอลิเมนต์นั้น **ไม่เกี่ยวข้องกับสถานะปัจจุบันของหน้าเว็บ** และ **ไม่ควรแสดงให้ผู้ใช้เห็น** เบราว์เซอร์จะซ่อนเอลิเมนต์โดยอัตโนมัติ (เทียบเท่า display: none)

ความแตกต่าง: hidden vs CSS display:none vs visibility:hidden

ตัวอย่าง: เมนูเฉพาะ Admin/User

<!DOCTYPE html>
<html>
<head>
  <title>HTML hidden Attribute Demo</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
    [hidden] { display: none !important; } /* บังคับให้ซ่อน */
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>ระบบสิทธิ์การเข้าถึง</legend>
      <label>ระดับสิทธิ์: 
        <input type="text" id="roleInput" placeholder="พิมพ์ 'admin' หรือ 'user'">
      </label>
      <br>
      <select id="adminMenu" hidden>
        <option>เพิ่มผู้ใช้</option>
        <option>ลบผู้ใช้</option>
        <option>แก้ไขผู้ใช้</option>
      </select>
      <select id="userMenu" hidden>
        <option>ดูโปรไฟล์</option>
        <option>ติดต่อแอดมิน</option>
      </select>
      <br>
      <input type="button" value="ตรวจสอบสิทธิ์" onclick="checkRole()">
      <div id="msg">กรุณาระบุระดับสิทธิ์</div>
    </fieldset>
  </form>

  <script>
    var roleInput = document.getElementById("roleInput");
    var adminMenu = document.getElementById("adminMenu");
    var userMenu = document.getElementById("userMenu");
    var msg = document.getElementById("msg");

    function checkRole() {
      var role = roleInput.value.trim().toLowerCase();
      if (role === 'admin') {
        adminMenu.hidden = false; // แสดงเมนูแอดมิน
        userMenu.hidden = true;   // ซ่อนเมนูยูเซอร์
        msg.textContent = '👑 ยินดีต้อนรับ Admin - เมนูจัดการผู้ใช้พร้อมใช้งาน';
        msg.style.color = 'purple';
      } else if (role === 'user') {
        userMenu.hidden = false;  // แสดงเมนูผู้ใช้
        adminMenu.hidden = true;  // ซ่อนเมนูแอดมิน
        msg.textContent = '👤 ยินดีต้อนรับ User - เมนูส่วนตัวพร้อมใช้งาน';
        msg.style.color = 'blue';
      } else {
        adminMenu.hidden = true;
        userMenu.hidden = true;
        msg.textContent = '❌ ระดับสิทธิ์ไม่ถูกต้อง (พิมพ์ admin หรือ user)';
        msg.style.color = 'red';
      }
    }
  </script>
</body>
</html>

การควบคุมด้วย JavaScript

var element = document.getElementById('myElement');

// ตรวจสอบสถานะ
if (element.hidden) { ... }

// ซ่อน
element.hidden = true;

// แสดง
element.hidden = false;

// Toggle
element.hidden = !element.hidden;

กรณีใช้งานจริง (Use Cases)

• Feature Flags: ซ่อนฟีเจอร์ที่ยังไม่เปิดให้บริการ
• Conditional UI: แสดง/ซ่อนฟิลด์ตามเงื่อนไข (เช่น เลือก "ประเทศอื่น" ถึงแสดงฟิลด์ "รัฐ/จังหวัด")
• Loading States: ซ่อนเนื้อหาขณะโหลด แล้วแสดงเมื่อพร้อม
• Permission-based UI: ซ่อนปุ่ม/เมนูที่ผู้ใช้ไม่มีสิทธิ์
• Form Validation: ซ่อนข้อความข้อผิดพลาดจนกว่าจะเกิดข้อผิดพลาด

ข้อควรระวัง

• hidden ไม่ได้ให้ความปลอดภัย ข้อมูลยังอยู่ใน DOM และ View Source ได้
• ไม่ควรใช้ซ่อนเนื้อหาสำคัญสำหรับ SEO (Search Engines อาจไม่ดัชนี)
• ใน CSS ให้ใช้ [hidden] { display: none !important; } เพื่อบังคับ เนื่องจากบาง Framework อาจมี CSS reset ที่ลบ display:none ออก