ออบเจ็กต์ Fieldset ใน HTML DOM

ออบเจ็กต์ Fieldset ใน HTML DOM แทนองค์ประกอบ <fieldset> ใช้สำหรับจัดกลุ่มองค์ประกอบฟอร์มที่เกี่ยวข้องกัน

คุณสมบัติ (Properties)

ไวยากรณ์ (Syntax)

การสร้าง fieldset element:

var fieldset = document.createElement("FIELDSET");

ตัวอย่าง

ตัวอย่างการสร้าง fieldset แบบไดนามิก:

<!DOCTYPE html>
<html>
<head>
<script>
  function createField() {
    var fieldset = document.createElement("FIELDSET");
    var text = document.createTextNode("FIELDSET element created");
    fieldset.appendChild(text);
    document.body.appendChild(fieldset);
  }
</script>
</head>
<body>
<h2>ตัวอย่างออบเจ็กต์ Fieldset</h2>
<p>คลิกปุ่มด้านล่างเพื่อสร้าง fieldset element</p>
<button onclick="createField()">CREATE</button>
<br><br>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงปุ่ม "CREATE"

เมื่อคลิกปุ่ม "CREATE" จะสร้าง fieldset พร้อมข้อความ "FIELDSET element created" ภายใน

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

• สร้างปุ่ม "CREATE" เรียกใช้ createField() เมื่อคลิก
• ฟังก์ชัน createField() สร้าง <fieldset> ด้วย createElement("FIELDSET") เก็บใน fieldset
• สร้างโหนดข้อความ "FIELDSET element created" ผูกเข้ากับ fieldset
• ต่อท้าย fieldset เข้า <body>
• fieldset ใช้จัดกลุ่ม input ที่เกี่ยวข้องกัน พร้อม <legend> เป็นหัวข้อ