คุณสมบัติ name ของ HTML DOM Fieldset ใช้สำหรับดึงหรือกำหนดค่าแอตทริบิวต์ name ขององค์ประกอบ <fieldset> แอตทริบิวต์ name ช่วยในการระบุข้อมูลฟอร์มหลังจากส่งฟอร์มแล้ว หรือสำหรับอ้างอิงองค์ประกอบฟอร์มได้อย่างง่ายดาย
ไวยากรณ์
ไวยากรณ์สำหรับการตั้งค่าคุณสมบัติ name ของ fieldset:
fieldsetObject.name = name
ที่นี่ name ระบุชื่อของ fieldset
ตัวอย่าง
มาดูตัวอย่างการใช้คุณสมบัติ name ของ Fieldset:
<!DOCTYPE html> <html> <head> <script> function fieldName() { var field = document.getElementById("FieldSet1").name; document.getElementById("Sample").innerHTML = "The fieldset name is "+field; } </script> </head> <body> <h1>Sample FORM</h1> <form id="FORM1"> <fieldset id="FieldSet1" name="FS1"> <legend>User Data:</legend> Name: <input type="text"><br> Address: <input type="text"><br> Age: <input type="text"> </fieldset> </form> <br> <button onclick="fieldName()">GET NAME</button> <p id="Sample"></p> </body> </html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
เมื่อคลิกปุ่ม GET NAME:
ในตัวอย่างข้างต้น:
เราสร้าง fieldset ที่มี name เป็น “FS1” และ id เป็น “FieldSet1” ภายในองค์ประกอบ form:
<form id="FORM1"> <fieldset id="FieldSet1" name="FS1"> <legend>User Data:</legend> Name: <input type="text"><br> Address: <input type="text"><br> Age: <input type="text"> </fieldset> </form>
เราสร้างปุ่ม GET NAME ที่จะเรียกใช้เมธอด fieldname() เมื่อผู้ใช้คลิก:
<button onclick="fieldName()">GET NAME</button>
เมธอด fieldname() ดึงองค์ประกอบ fieldset โดยใช้เมธอด getElementById() จากนั้นดึงค่าแอตทริบิวต์ name และกำหนดให้ตัวแปร field ค่านี้จะถูกแสดงในย่อหน้าที่มี id “Sample” โดยใช้คุณสมบัติ innerHTML:
function fieldName() { var field = document.getElementById("FieldSet1").name; document.getElementById("Sample").innerHTML = "The fieldset name is "+field; }
