อินพุต HTML DOM รีเซ็ตคุณสมบัติชื่อ

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

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การตั้งค่าคุณสมบัติชื่อ −

resetObject.name = name

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

ตัวอย่าง

ให้เราดูตัวอย่างคุณสมบัติการรีเซ็ตชื่อ -

<!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>Change the name of the above reset button by clicking the below button</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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

อินพุต HTML DOM รีเซ็ตคุณสมบัติชื่อ

เมื่อคลิกเปลี่ยนชื่อ -

อินพุต HTML DOM รีเซ็ตคุณสมบัติชื่อ

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

เราได้สร้าง องค์ประกอบที่มี type=”reset”, id=”RESET1” การคลิกที่ปุ่มนี้จะรีเซ็ตข้อมูลในแบบฟอร์ม ปุ่มนี้อยู่ในแบบฟอร์มที่มีช่องข้อความสองช่องด้วย และแบบฟอร์มยังมีรูปแบบอินไลน์ที่ใช้กับปุ่มนี้ด้วย -

<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() เพื่อรับฟิลด์อินพุตที่มีการรีเซ็ตประเภทและตั้งค่าแอตทริบิวต์ชื่อเป็น "RES_BTN" การเปลี่ยนแปลงนี้จะมีผลในย่อหน้าที่มี id "Sample" และใช้คุณสมบัติ innerHTML เพื่อแสดง ข้อความที่ต้องการ −

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