HTML DOM Form reset() मेथड

HTML DOM Form reset() मेथड का उपयोग फॉर्म एलिमेंट्स के सभी मानों को रीसेट करने और फॉर्म एलिमेंट्स के value एट्रिब्यूट का उपयोग करके निर्दिष्ट डिफ़ॉल्ट मानों को प्रदर्शित करने के लिए किया जाता है। यह फॉर्म डेटा क्लियर करने के लिए रीसेट बटन की तरह कार्य करता है और यह किसी भी प्रकार का पैरामीटर नहीं लेता।

सिंटैक्स

Form reset() मेथड का सिंटैक्स:

formObject.reset()

उदाहरण

Form reset() मेथड का एक उदाहरण देखते हैं:

<!DOCTYPE html> <html> <head> 
<style> 
  form{ 
    border: 2px solid blue; 
    margin: 2px; 
    padding: 4px; 
  } 
</style> 
<script> 
  function ResetForm() { 
    document.getElementById("FORM1").reset(); 
    document.getElementById("Sample").innerHTML = "Form has been reset"; 
  } 
</script> </head> <body> 
<h1>Form reset() method example</h1> 
<form id="FORM1" method="post" action="/sample_page.php"> 
  <label>User Name <input type="text" name="usrN"></label> <br><br> 
  <label>Age <input type="text" name="Age"></label> <br><br> 
  <input type="submit" value="SUBMIT"> 
  <input type="button" onclick="ResetForm()" value="RESET"> 
</form> 
<p id="Sample"></p> 
</body> </html>

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा:

HTML DOM Form reset() मेथड

RESET बटन पर क्लिक करने पर:

HTML DOM Form reset() मेथड

उदाहरण की व्याख्या

हमने पहले id="FORM1", method="post" और action="/sample_page.php" वाला एक फॉर्म बनाया। इसमें दो टेक्स्ट टाइप के इनपुट फील्ड, एक सबमिट बटन और एक रीसेट बटन है।
RESET बटन क्लिक होने पर ResetForm() फंक्शन को एक्जीक्यूट करता है।
ResetForm() मेथड डॉक्यूमेंट ऑब्जेक्ट के getElementById() मेथड का उपयोग करके <form> एलिमेंट को प्राप्त करता है और इस पर reset() मेथड को कॉल करता है। यह फॉर्म एलिमेंट्स में सभी डेटा को क्लियर करता है। अंत में innerHTML प्रॉपर्टी का उपयोग करके हम इस परिवर्तन को दर्शाने वाला इच्छित टेक्स्ट id "Sample" वाले पैराग्राफ के अंदर प्रदर्शित करते हैं।

function ResetForm() { 
  document.getElementById("FORM1").reset(); 
  document.getElementById("Sample").innerHTML = "Form has been reset"; 
}