คุณสมบัติ name ของ HTML DOM Input Reset

คุณสมบัติ name ของ HTML DOM Input Reset ใช้สำหรับตั้งค่าหรือส่งคืนแอตทริบิวต์ name ของปุ่มรีเซ็ต แอตทริบิวต์ name ช่วยในการระบุข้อมูลฟอร์มหลังจากส่งไปยังเซิร์ฟเวอร์แล้ว

ไวยากรณ์

ไวยากรณ์สำหรับการตั้งค่าคุณสมบัติ name:

resetObject.name = name

ที่นี่ name ใช้สำหรับระบุชื่อของปุ่มรีเซ็ต

ตัวอย่าง

มาดูตัวอย่างการใช้คุณสมบัติ name ของ Reset:

<!DOCTYPE html> <html> <body> <h1>Input range name Property</h1> <form style="border:solid 2px green;padding:2px"> UserName: <input type="text" id="USR"> <br> Location: <input type="text" id="Age"><br><br> <input type="reset" id="RESET1"> </form> <p>เปลี่ยนชื่อของปุ่มรีเซ็ตด้านบนโดยคลิกปุ่มด้านล่าง</p> <button type="button" onclick="changeName()">CHANGE NAME</button> <p id="Sample"></p> <script>    function changeName() {       document.getElementById("RESET1").name ="RES_BTN" ;       document.getElementById("Sample").innerHTML = "Reset Button name is now RES_BTN";    } </script> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

เมื่อคลิก CHANGE NAME:

ในตัวอย่างข้างต้น:

เราสร้างองค์ประกอบ <input> ที่มี type=”reset” id=”RESET1” การคลิกปุ่มนี้จะรีเซ็ตข้อมูลฟอร์ม ปุ่มนี้อยู่ในฟอร์มที่มีช่องข้อความสองช่องและมี inline style:

<form style="border:solid 2px green;padding:2px"> UserName: <input type="text" id="USR"> <br> Location: <input type="text" id="Age"><br><br> <input type="reset" id="RESET1"> </form>

เราสร้างปุ่ม CHANGE NAME ที่จะเรียกใช้เมธอด changeName() เมื่อผู้ใช้คลิก:

<button type="button" onclick="changeName()">CHANGE NAME</button>

เมธอด changeName() ใช้ getElementById() เพื่อดึงช่อง input ที่มี type reset และตั้งค่าแอตทริบิวต์ name เป็น “RES_BTN” การเปลี่ยนแปลงนี้สะท้อนในย่อหน้าที่มี id “Sample” โดยใช้ innerHTML เพื่อแสดงข้อความที่ต้องการ:

function changeName() {    document.getElementById("RESET1").name ="RES_BTN" ;    document.getElementById("Sample").innerHTML = " Reset Button name is now RES_BTN"; }