แอตทริบิวต์ id ใน HTML: ตัวระบุเฉพาะเจาะจงสำหรับ CSS และ JavaScript

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

แอตทริบิวต์ id ใช้กำหนด **ตัวระบุเฉพาะเจาะจง (Unique Identifier)** ให้กับเอลิเมนต์ HTML เพื่อ:

• เป็นเป้าหมายของ CSS Selector (#id)
• ค้นหาเอลิเมนต์ด้วย JavaScript (document.getElementById())
• เชื่อมโยงกับ <label for="id"> เพื่อเข้าถึงได้ง่าย (Accessibility)
• เป็น Fragment Identifier ใน URL (#section1)

กฎสำคัญ

1. ต้องไม่ซ้ำกัน ในหน้าเว็บเดียวกัน (Unique per page)
2. ต้องมีอย่างน้อย 1 ตัวอักษร (ไม่ว่างเปล่า)
3. **ไม่ควรมีช่องว่าง** (Space) - แม้ HTML5 จะอนุญาต แต่ CSS/JS อาจมีปัญหา
4. HTML5 อนุญาตให้ขึ้นต้นด้วยตัวเลขได้ (HTML4 ห้าม)
5. Case-sensitive (แยกตัวพิมพ์เล็ก/ใหญ่)

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <title>HTML id Attribute Demo</title>
  <style>
    * { padding: 2px; margin: 5px; }
    form { width: 70%; margin: 0 auto; text-align: center; }
    #gameArea { 
      width: 70%; margin: 0 auto; padding: 0; text-align: center; 
      border: 1px solid #333; height: 105px; background-color: #28a745; 
      position: relative; /* สำคัญสำหรับการจัดตำแหน่งลูก */
    }
    input[type="button"] { border-radius: 10px; }
    #zoneDangerTop, #zoneDangerBottom { 
      height: 40px; background-color: #dc3545; 
    }
    #zoneDangerTop { border-bottom: 1px solid #333; }
    #zoneDangerBottom { border-top: 1px solid #333; margin-top: 15px; }
    #safeZone { height: 25px; background: #28a745; } /* พื้นที่ปลอดภัยตรงกลาง */
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>เกมหลบพื้นที่อันตราย (ใช้ id)</legend>
      <div id="gameArea">
        <div id="zoneDangerTop"><h2>⚠ อันตราย ⚠</h2></div>
        <div id="safeZone"><h2>✅ ปลอดภัย ✅</h2></div>
        <div id="zoneDangerBottom"><h2>⚠ อันตราย ⚠</h2></div>
      </div>
      <input type="button" id="startBtn" value="เริ่มเกม" onclick="startGame()">
      <div id="status"></div>
    </fieldset>
  </form>

  <script>
    var statusDiv = document.getElementById('status');
    var gameArea = document.getElementById('gameArea');
    var gameActive = false;

    function playGame(event) {
      if (!gameActive) return;
      var rect = gameArea.getBoundingClientRect();
      var y = event.clientY - rect.top; // ตำแหน่ง Y ภายใน gameArea
      
      // พื้นที่ปลอดภัย: y ระหว่าง 40 ถึง 65 (ประมาณ)
      if (y > 40 && y < 65) {
        statusDiv.textContent = '🟢 อยู่ในโซนปลอดภัย - ทำต่อไป!';
        statusDiv.style.color = 'green';
        // เงื่อนไขชนะ: ชี้ตรงกลาง X (ตัวอย่าง)
        if (Math.abs(event.clientX - rect.left - gameArea.offsetWidth/2) < 5) {
          statusDiv.textContent = '🏆 ยินดีด้วย! คุณชนะ!';
          gameArea.removeEventListener('mousemove', playGame);
          gameActive = false;
        }
      } else {
        statusDiv.textContent = '🔴 เข้าพื้นที่อันตราย - Game Over!';
        statusDiv.style.color = 'red';
        gameArea.removeEventListener('mousemove', playGame);
        gameActive = false;
      }
    }

    function startGame() {
      statusDiv.textContent = '🎮 เกมเริ่มแล้ว! วางเมาส์ในพื้นที่เขียว';
      statusDiv.style.color = 'blue';
      gameActive = true;
      gameArea.addEventListener('mousemove', playGame);
    }
  </script>
</body>
</html>

แนวทางปฏิบัติที่ดี (Best Practices)

• ใช้ชื่อ id ที่ **สื่อความหมาย** (Semantic) เช่น id="user-login-form" ไม่ใช่ id="f1"
• ใช้ **kebab-case** (คั่นด้วยขีด) เป็นมาตรฐาน: main-navigation, user-profile-card
• หลีกเลี่ยง id ที่ขึ้นต้นด้วยตัวเลข (แม้ HTML5 อนุญาต) เพื่อความเข้ากันได้กับ CSS Selector เก่า
• ไม่ควรใช้ id ซ้ำ แม้จะอยู่ใน Shadow DOM หรือ iframe แยกกัน (ควร unique ทั้งหน้า)
• สำหรับ CSS ให้ใช้ Class มากกว่า ID เพื่อ Specificity ต่ำกว่า และ reuse ได้

การเข้าถึงด้วย JavaScript

// วิธีมาตรฐาน (เร็วที่สุด)
var elem = document.getElementById('my-id');

// วิธีสมัยใหม่ (querySelector - ช้ากว่าเล็กน้อย แต่ยืดหยุ่นกว่า)
var elem = document.querySelector('#my-id');