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

คุณสมบัติ name ของ Form ใน HTML DOM เกี่ยวข้องกับแอตทริบิวต์ name ขององค์ประกอบฟอร์ม ใช้สำหรับตั้งค่าหรือดึงค่าแอตทริบิวต์ name ของฟอร์ม ให้ชื่อกับฟอร์มเพื่อให้อ้างอิงได้

ไวยากรณ์ (Syntax)

การตั้งค่าชื่อฟอร์ม:

formObject.name = name

name ระบุชื่อของฟอร์ม

ตัวอย่าง

ตัวอย่างการเปลี่ยนชื่อฟอร์มแบบไดนามิก:

<!DOCTYPE html>
<html>
<head>
<style>
  form {
    border: 2px solid blue;
    margin: 2px;
    padding: 4px;
  }
</style>
<script>
  function ChangeName() {
    document.getElementById("FORM1").name = "FORM_2";
    document.getElementById("Sample").innerHTML = "ชื่อฟอร์มเปลี่ยนจาก FORM_1 เป็น FORM_2 แล้ว";
  }
</script>
</head>
<body>
<h1>ตัวอย่างคุณสมบัติ name ของ Form</h1>
<form id="FORM1" method="post" action="/sample_page.php" name="FORM_1">
  <label>User Name <input type="text" name="usrN"></label><br><br>
  <label>Age <input type="text" name="Age"></label><br><br>
  <input type="submit" value="SUBMIT">
</form>
<p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนชื่อฟอร์มข้างบน</p>
<button onclick="ChangeName()">Change Name</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงฟอร์มที่มีชื่อ "FORM_1" พร้อมช่องกรอก Username, Age และปุ่ม SUBMIT รวมถึงปุ่ม "Change Name"

เมื่อคลิกปุ่ม "Change Name" ข้อความจะแสดง "ชื่อฟอร์มเปลี่ยนจาก FORM_1 เป็น FORM_2 แล้ว"

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

• สร้างฟอร์ม id="FORM1" มี method="post", action="/sample_page.php", name="FORM_1" ประกอบด้วยช่อง Username, Age และปุ่มส่ง
• สร้างปุ่ม "Change Name" เรียกใช้ ChangeName() เมื่อคลิก
• ฟังก์ชัน ChangeName() ดึงฟอร์มด้วย getElementById("FORM1") แล้วตั้งค่า .name = "FORM_2"
• แสดงข้อความยืนยันในย่อหน้า id="Sample"