HTML DOM Button type प्रॉपर्टी HTML <button> एलिमेंट से जुड़ी है। button एलिमेंट डिफ़ॉल्ट रूप से type=”submit” होता है यानी फॉर्म पर किसी भी बटन पर क्लिक करने से फॉर्म सबमिट हो जाएगा। button type प्रॉपर्टी बटन के प्रकार को सेट या लौटाती है।
सिंटैक्स
निम्नलिखिक सिंटैक्स है -
button type प्रॉपर्टी सेट करना -
buttonObject.type = "submit|button|reset"
यहां, submit|button|reset बटन प्रकार के मान हैं। Submit डिफ़ॉल्ट रूप से सेट होता है।
- Submit − बटन को सबमिट बटन बनाता है।
- Button − एक सामान्य क्लिक करने योग्य बटन बनाता है।
- Reset − एक रीसेट बटन बनाता है जो फॉर्म डेटा को रीसेट करता है।
उदाहरण
आइए HTML DOM button type प्रॉपर्टी का एक उदाहरण देखें -
<!DOCTYPE html> <html> <body> <form id="Form1" action="/sample.php"> <label>First Name: <input type="text" name="fname"><br><br></label> <label>Surname: <input type="text" name="lname"><br><br></label> <button id="Button1" type="submit">Submit</button> </form> <p>Click the below button below to change the type of the above button from "submit" to "reset".</p> <button onclick="changeType()">CHANGE</button> <p id="Sample"></p> <script> function changeType() { document.getElementById("Button1").type = "reset"; document.getElementById("Sample").innerHTML = "The Submit button is now a reset button"; } </script> </body> </html>
आउटपुट
यह निम्नलिखिक आउटपुट उत्पन्न करेगा -
अब Submit (जो अब reset है) पर क्लिक करने पर -
उपरोक्त उदाहरण में -
हमने पहले दो टेक्स्ट फील्ड और type “submit” के साथ एक बटन बनाया जो हमारे डेटा को सबमिट करेगा -
<label>First Name: <input type="text" name="fname"><br><br></label> <label>Surname: <input type="text" name="lname"><br><br></label> <button id="Button1" type="submit">Submit</button>
हमने तब CHANGE बटन बनाया जो क्लिक पर changeType() मेथड को निष्पादित करेगा -
<button onclick="changeType()">CHANGE</button>
changeType() मेथड इसकी id का उपयोग करके बटन एलिमेंट को प्राप्त करता है और इसके type को reset पर सेट करता है। फिर परिवर्तन के संबंध में संदेश “Id” sample वाले पैराग्राफ में परिलक्षित होता है। अब जब आप सबमिट बटन पर क्लिक करते हैं तो यह डेटा सबमिट करने के बजाय रीसेट करेगा यानी फॉर्म डेटा को साफ़ करेगा -
function changeType() { document.getElementById("Button1").type = "reset"; document.getElementById("Sample").innerHTML = "The Submit button is now a reset button"; }
