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

คุณสมบัติ form ของ Fieldset ใน HTML DOM คืนค่าอ้างอิงฟอร์ม (form reference) ประเภทออบเจ็กต์ form สำหรับองค์ประกอบ <fieldset> ที่อยู่ภายในฟอร์มนั้น เป็นคุณสมบัติแบบอ่านอย่างเดียว (read-only) หาก fieldset ไม่อยู่ในฟอร์ม จะคืนค่า null

ไวยากรณ์ (Syntax)

fieldsetObject.form

ตัวอย่าง

ตัวอย่างการดึง id ของฟอร์มที่มี fieldset อยู่ภายใน:

<!DOCTYPE html>
<html>
<head>
<script>
  function formId() {
    var formId = document.getElementById("FieldSet1").form.id;
    document.getElementById("Sample").innerHTML = "ID ของฟอร์มที่มี fieldset อยู่ภายในคือ: " + formId;
  }
</script>
</head>
<body>
<h1>ตัวอย่างฟอร์ม</h1>
<form id="FORM1">
  <fieldset id="FieldSet1">
    <legend>User Data:</legend>
    Name: <input type="text"><br>
    Address: <input type="text"><br>
    Age: <input type="text">
  </fieldset>
</form>
<br>
<button onclick="formId()">GET ID</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงฟอร์มที่มี fieldset "User Data" พร้อมช่อง Name, Address, Age และปุ่ม "GET ID"

เมื่อคลิกปุ่ม "GET ID" จะแสดง "ID ของฟอร์มที่มี fieldset อยู่ภายในคือ: FORM1"

คำอธิบายโค้ด

• สร้าง <form id="FORM1"> มี <fieldset id="FieldSet1"> ภายใน พร้อม legend และช่องป้อนข้อมูล 3 ช่อง
• สร้างปุ่ม "GET ID" เรียกใช้ formId() เมื่อคลิก
• ฟังก์ชัน formId() ดึง fieldset ด้วย getElementById("FieldSet1") แล้วอ่าน .form.id ได้ id ของฟอร์มที่ครอบครอง
• แสดงผลในย่อหน้า id="Sample"