คุณสมบัติชื่อแบบฟอร์ม HTML DOM เชื่อมโยงกับแอตทริบิวต์ชื่อขององค์ประกอบแบบฟอร์ม คุณสมบัติชื่อแบบฟอร์มใช้สำหรับการตั้งค่าหรือรับค่าแอตทริบิวต์ชื่อแบบฟอร์ม คุณสมบัติชื่อแบบฟอร์มให้ชื่อกับแบบฟอร์ม
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งชื่อแบบฟอร์ม −
formObject.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 = "The form name is changed from FORM_1 to FORM_2 ";
}
</script>
</head>
<body>
<h1>Form length property example</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>Change the name of the form above by clicking the below button</p>
<button onclick="ChangeName()">Change Name</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่ม “เปลี่ยนชื่อ” -
ในตัวอย่างข้างต้น
ขั้นแรกเราได้สร้างฟอร์มที่มี id=“FORM1”, method=“post”, action=“/sample_page.php” และตั้งค่าแอตทริบิวต์ชื่อเป็น “FORM_1” แบบฟอร์มประกอบด้วยช่องป้อนข้อมูลสองช่องที่มีข้อความประเภทและปุ่มส่งเพื่อส่งข้อมูลแบบฟอร์มไปยังเซิร์ฟเวอร์ -
<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>
เราได้สร้างปุ่ม "เปลี่ยนชื่อ" ที่จะรันเมธอด ChangeName() เมื่อผู้ใช้คลิก -
<button onclick="ChangeName()">Change Name</button>
เมธอด ChangeName() รับองค์ประกอบแบบฟอร์มโดยใช้เมธอด getElementById() วัตถุเอกสาร และเปลี่ยนค่าแอตทริบิวต์ชื่อเป็น “FORM_2” การเปลี่ยนแปลงนี้จะสะท้อนให้เห็นในย่อหน้าที่มีรหัส “ตัวอย่าง” โดยใช้คุณสมบัติ innerHTML() -
function ChangeName() {
document.getElementById("FORM1").name="FORM_2";
document.getElementById("Sample").innerHTML = "The form name is changed from FORM_1 to FORM_2 ";
} 