Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

คุณสมบัติแบบฟอร์มรีเซ็ตอินพุต HTML DOM


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

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับการป้อนข้อมูล รีเซ็ตคุณสมบัติของแบบฟอร์ม

resetObject.form

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>
<h1>Input reset form Property</h1>
<form id="FORM_1" 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 form id by clicking on the below button</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
   function formId() {
      var P=document.getElementById("RESET1").form.id;
      document.getElementById("Sample").innerHTML = "The id of the form containing the reset button is: "+P ;
   }
</script>
</body>
</html>

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

คุณสมบัติแบบฟอร์มรีเซ็ตอินพุต HTML DOM

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

คุณสมบัติแบบฟอร์มรีเซ็ตอินพุต 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>

จากนั้นเราได้สร้างปุ่ม GET FORM ที่จะรันเมธอด formId() เมื่อผู้ใช้คลิก

<button type="button" onclick="formId()">GET FORM</button>

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

function formId() {
   var P=document.getElementById("RESET1").form.id;
   document.getElementById("Sample").innerHTML = "The id of the form containing the reset button is: "+P ;
}