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

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

ไวยากรณ์

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

resetObject.value = text;

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

ตัวอย่าง

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

<!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>ดึงค่าขององค์ประกอบด้านบนโดยคลิกปุ่มด้านล่าง</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>

ผลลัพธ์

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

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

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

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

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

เมธอด changeValue() ดึงองค์ประกอบ input ที่มี type reset โดยใช้ getElementById() และตั้งค่าแอตทริบิวต์ “value” เป็น “Form_Reset” ค่านี้จะแสดงบนปุ่มเอง ข้อความที่บ่งชี้การเปลี่ยนแปลงนี้จะแสดงในย่อหน้าที่มี id “Sample” โดยใช้ 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"; }