HTML DOM Input รีเซ็ตค่าคุณสมบัติ

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

ไวยากรณ์

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

การตั้งค่าคุณสมบัติ -

resetObject.value = text;

ในที่นี้ใช้ข้อความเพื่อระบุข้อความที่แสดงบนปุ่มรีเซ็ต

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h1>Input reset Value 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>Get the above element value by clicking the below button</p>
<button onclick="changeValue()">CHANGE</button>
<p id="Sample"></p>
<script>
   function changeValue() {
      document.getElementById("RESET1").value="Form_Reset";
      document.getElementById("Sample").innerHTML="The reset button value is changed and the value can be seen on the button itself";
   }
</script>
</body>
</html>

ผลลัพธ์

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

HTML DOM Input รีเซ็ตค่าคุณสมบัติ

เมื่อคลิกปุ่ม CHANGE -

HTML DOM Input รีเซ็ตค่าคุณสมบัติ

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

เราได้สร้าง องค์ประกอบที่มี 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” ที่จะรันเมธอด changeValue() เมื่อผู้ใช้คลิก -

<button onclick="changeValue()">CHANGE</button>

เมธอด changeValue() รับองค์ประกอบอินพุตที่มีการรีเซ็ตประเภทโดยใช้เมธอด getElementById() และตั้งค่าแอตทริบิวต์ "value" เป็น "Form_Reset" ค่านี้จะแสดงบนปุ่มเอง ข้อความที่ระบุการเปลี่ยนแปลงนี้จะแสดงในย่อหน้าที่มีรหัส "ตัวอย่าง" โดยใช้คุณสมบัติ innerHTML -

function changeValue() {
   document.getElementById("RESET1").value="Form_Reset";
   document.getElementById("Sample").innerHTML="The reset button value is changed and the value can be seen on the button itself";
}