HTML DOM Option label Property - คุณสมบัติ label ของตัวเลือก

คุณสมบัติ label ของ HTMLOptionElement (<option>) ใช้ **อ่านหรือตั้งค่า** ข้อความป้ายกำกับ (label) ที่แสดงใน dropdown list แทนที่จะใช้เนื้อหาภายในแท็ก

ความแตกต่าง label vs text content

รูปแบบการใช้งาน

// อ่านค่า
const label = optionElement.label;

// ตั้งค่า
optionElement.label = "New Label";

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 2rem; text-align: center; 
           background: linear-gradient(135deg, #FBAB7E 0%, #F7CE68 100%); 
           min-height: 100vh; color: #333; }
    h1 { color: #23CE6B; }
    .dropdown { 
      width: 35%; min-width: 250px; 
      padding: 10px; 
      font-size: 1rem; 
      border: 2px solid #fff; 
      border-radius: 8px;
      background: white;
    }
    .btn { 
      background: #0197F6; 
      color: white; 
      border: none; 
      padding: 12px 24px; 
      border-radius: 6px; 
      cursor: pointer; 
      font-weight: bold;
      margin-top: 1rem;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    .show { font-size: 1.2rem; font-weight: bold; margin-top: 1rem; color: #23CE6B; }
  </style>
</head>
<body>
  <h1>DOM Option label Demo</h1>
  <p>เลือกวิชาที่คุณชอบ:</p>
  
  <select class="dropdown" id="subjectSelect">
    <option label="Physics - ฟิสิกส์" value="phy">Physics</option>
    <option label="Mathematics - คณิตศาสตร์" value="math">Maths</option>
    <option label="Chemistry - เคมี" value="chem">Chemistry</option>
    <option label="English - ภาษาอังกฤษ" value="eng">English</option>
    <option value="other">Other (no label attr)</option>
  </select>
  
  <button class="btn" onclick="showLabel()">แสดงค่า Label</button>
  <div class="show" id="result"></div>
  
  <script>
    function showLabel() {
      const select = document.getElementById('subjectSelect');
      const selectedOption = select.selectedOptions[0];
      
      const label = selectedOption.label;        // จาก label attribute
      const text = selectedOption.text;          // จาก text content
      const value = selectedOption.value;        // จาก value attribute
      
      document.getElementById('result').innerHTML = `
        Label: ${label || '(ไม่มี label attribute)'}

        Text: ${text}

        Value: ${value}
      `;
      
      console.log('Label:', label, 'Text:', text, 'Value:', value);
    }
  </script>
</body>
</html>

พฤติกรรมของเบราว์เซอร์

• หากมี label attribute → แสดงค่า label ใน dropdown
• หากไม่มี label → แสดง text content ระหว่างแท็ก
• label attribute มีประโยชน์เมื่อต้องการแสดงข้อความต่างจาก value หรือ text content

กรณีใช้งานจริง

• แสดงชื่อเต็มแต่ส่งค่ารหัส (code) ไป server
• หลายภาษา - label แสดงภาษาผู้ใช้, value คงที่
• UI ที่ต้องการแสดงข้อมูลเพิ่มเติมใน dropdown (เช่น ราคา, สต็อก)
• Accessibility - label ช่วย screen readers อ่านข้อความที่ชัดเจนกว่า

การเข้าถึง option อื่นๆ

<script>
  const select = document.getElementById('subjectSelect');
  
  // ทุก options
  Array.from(select.options).forEach((opt, i) => {
    console.log(`${i}: label="${opt.label}" text="${opt.text}" value="${opt.value}"`);
  });
  
  // เฉพาะที่มี label attribute
  const withLabel = Array.from(select.options).filter(opt => opt.hasAttribute('label'));
  console.log('Options with label:', withLabel.map(o => o.label));
</script>

ความสัมพันธ์กับ <optgroup>

<optgroup> มีแอตทริบิวต์ label ของตัวเอง (บังคับ) ใช้จัดกลุ่ม options:

<select>
  <optgroup label="วิทยาศาสตร์">
    <option label="ฟิสิกส์ (Physics)" value="phy">Physics</option>
    <option label="เคมี (Chemistry)" value="chem">Chemistry</option>
  </optgroup>
  <optgroup label="มนุษยศาสตร์">
    <option label="ประวัติศาสตร์" value="hist">History</option>
  </optgroup>
</select>