คุณสมบัติ htmlFor ของ Label ใน HTML DOM

คุณสมบัติ htmlFor ของอีลีเมนต์ <label> ใช้สำหรับอ่านหรือตั้งค่าค่าของแอตทริบิวต์ for (เชื่อมโยง label กับ input)

ไวยากรณ์ (Syntax)

labelObject.htmlFor

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

ตัวอย่างด้านล่างเปลี่ยนการเชื่อมโยง label ระหว่าง editorOne และ editorTwo:

<!DOCTYPE html>
<html>
<head>
<title>Label htmlFor</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>Label-htmlFor</legend>
    <label id="CurrentEditor" for="editorTwo">Current Editor:</label><br>
    <input type="text" id="editorOne" placeholder="editorOne">
    <input type="text" id="editorTwo" placeholder="editorTwo">
    <input type="button" onclick="getEventData()" value="Change Editor">
    <div id="divDisplay">Label for attribute set as editor two</div>
  </fieldset>
</form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var labelSelect = document.getElementById("CurrentEditor");
  
  function getEventData() {
    if(labelSelect.htmlFor === 'editorTwo'){
      divDisplay.textContent = 'Label for attribute set as editor one';
      labelSelect.htmlFor = 'editorOne';
    }
  }
</script>
</body>
</html>

ผลลัพธ์

ก่อนคลิกปุ่ม "Change Editor": Label เชื่อมกับ editorTwo, แสดง "Label for attribute set as editor two"

หลังคลิกปุ่ม "Change Editor": Label เปลี่ยนเชื่อมกับ editorOne, แสดง "Label for attribute set as editor one"

หมายเหตุ: รูปภาพตัวอย่างจากต้นฉบับไม่ได้รวมอยู่ในเนื้อหานี้