<इनपुट प्रकार = 'बटन' /> और <इनपुट प्रकार = 'सबमिट' /> के बीच अंतर


223

मूर्खतापूर्ण प्रश्न जैसी कोई बात नहीं है, इसलिए यहां हम जाते हैं: क्या अंतर है <input type='button' />और <input type='submit' />?


2
एचटीएमएल <बटन> एलिमेंट अपने दम पर एक फॉर्म सबमिट नहीं करता है ...
षट्कोण थ्योरी

6
दरअसल, यह कुछ ब्राउज़रों में होता है। फॉर्म सबमिट करने के बाद, सबमिट बटन के बिना, लेकिन इसके बजाय <बटन> सबमिट-कार्यक्षमता पर लागू होगा। फ़ायरफ़ॉक्स का यह व्यवहार है।
जिशि

W3C कल्पना को पढ़ते समय यह वास्तव में डिफ़ॉल्ट व्यवहार है, क्योंकि बटन में एक प्रकार की विशेषता है जो "सबमिट" करने के लिए चूक करता है।
जिशि


37
मेरे पास एक ही सवाल था और यह निश्चित रूप से एक मूर्खतापूर्ण सवाल नहीं है, खासकर यदि आप एक asp.net वेब फ़ॉर्म डेवलपर के रूप में आपके जीवन भर रहे हैं जहां हम नियमित रूप से html का उपयोग नहीं करते हैं क्योंकि बेवकूफ asp.net नियंत्रण इस गंदगी को बाहर थूकते हैं हमारे लिए ... यही कारण है कि हम MVC में जाने पर गूंगे हो जाते हैं और किंडरगार्डन में वापस जाने के लिए यह पता लगाते हैं कि सरल फॉर्म तत्वों को फिर से कैसे कोडित किया जाए। :)
पॉजिटिव

जवाबों:


235

<input type="button" />बटन एक फ़ॉर्म सबमिट नहीं करेंगे - वे डिफ़ॉल्ट रूप से कुछ भी नहीं करते हैं। वे आम तौर पर एक AJAX अनुप्रयोग के हिस्से के रूप में जावास्क्रिप्ट के साथ संयोजन के रूप में उपयोग किए जाते हैं।

<input type="submit"> जब तक आप जावास्क्रिप्ट के साथ अन्यथा निर्दिष्ट नहीं करते हैं तब बटन उस रूप को सबमिट करेंगे, जब उपयोगकर्ता उन पर क्लिक करते हैं।


42
इसके अलावा, ब्राउज़र फ़ॉर्म में "एंटर" कुंजी को कैप्चर कर सकते हैं और सबमिट बटन होने पर स्वचालित रूप से फ़ॉर्म सबमिट कर सकते हैं, लेकिन अन्यथा नहीं।
मिस्टर शाइनी और न्यू 安 Sh

2
वे यह भी करते हैं कि यदि आपके पास एक प्रकार = "छवि" है, जिसका उपयोग क्लिक करने पर फ़ॉर्म-सबमिशन को ट्रिगर करने के लिए किया जा सकता है।
Jishi

5
मिस्टर शाइनी और न्यू: फॉर्म बिना किसी बटन के एंटर की के जरिए सबमिट किए जा सकते हैं। उदाहरण के लिए, एक टेक्स्ट इनपुट पर ध्यान केंद्रित करना पर्याप्त है।
लसार

3
आप BUTTON तत्वों का उपयोग कर सकते हैं, हालांकि (सभी को आश्चर्यचकित करें) हर किसी के पसंदीदा ब्राउज़र (IE) का उपयोग करते समय उनके साथ कुछ समस्याएं होती हैं। हालांकि जानने के लायक।

4
यह स्पष्ट रूप से बहुत पुराना है, लेकिन मुझे अपने 2 सेंट देने की आवश्यकता महसूस होती है क्योंकि मुझे लगता है कि यह बटन प्रकारों का उपयोग करने का एक बड़ा पतन है ... फॉर्म ऑनसुबमिट घटना को जावास्क्रिप्ट सबमिशन से निकाल नहीं दिया जाता है, जिससे संभावित रखरखाव बुरे सपने आते हैं।
मथोनमॉस्टरमैन

20

एक 'बटन' सिर्फ एक बटन है, जिसमें आप जावास्क्रिप्ट का उपयोग करके अतिरिक्त कार्यक्षमता जोड़ सकते हैं। एक 'सबमिट' इनपुट प्रकार में उस फ़ॉर्म को सबमिट करने की डिफ़ॉल्ट कार्यक्षमता होती है, जो (हालांकि, निश्चित रूप से, आप अभी भी जावास्क्रिप्ट का उपयोग करके अतिरिक्त कार्यक्षमता जोड़ सकते हैं)।


7

बटन अपने आप फॉर्म नहीं जमा करेगा। यह एक साधारण बटन है जो जावास्क्रिप्ट का उपयोग करके कुछ ऑपरेशन करने के लिए उपयोग किया जाता है जबकि सबमिट एक प्रकार का बटन है जो डिफ़ॉल्ट रूप से तब सबमिट करता है जब भी उपयोगकर्ता सबमिट बटन पर क्लिक करता है।


3

IE 8 वास्तव में पहले बटन का उपयोग करता है जो इसे सबमिट या बटन से सामना करता है। आसानी से इंगित करने के बजाय जो इसे इनपुट प्रकार बनाकर वांछित है = पृष्ठ पर आदेश सबमिट करना वास्तव में महत्वपूर्ण है।


3

यह भी उल्लेख किया जाना चाहिए कि टाइप = "सबमिट" का एक नामांकित इनपुट दूसरे प्रकार के नामित फ़ील्ड के साथ भी प्रस्तुत किया जाएगा, जबकि एक नामित इनपुट प्रकार = "बटन" नहीं होगा।

अन्य शब्दों के साथ, नीचे दिए गए उदाहरण में, नामित इनपुट name=button1 WON'T जमा नहीं होगा , जबकि नामित इनपुट name=submit1 WILL प्रस्तुत किया जाएगा।

नमूना HTML फ़ॉर्म (index.html):

<form action="checkout.php" method="POST">

  <!-- this won't get submitted despite being named -->
  <input type="button" name="button1" value="a button">

  <!-- this one does; so the input's TYPE is important! -->
  <input type="submit" name="submit1" value="a submit button">

</form>

PHP स्क्रिप्ट (checkout.php) जो उपरोक्त फॉर्म की कार्रवाई को संसाधित करती है:

<?php var_dump($_POST); ?>

नाम / tmp / test / फ़ोल्डर में दो फ़ाइलों को बनाकर अपनी स्थानीय मशीन पर उपरोक्त परीक्षण करें, फिर शेल के लिए अंतर्निहित PHP वेब सर्वर चला रहे हैं:

php -S localhost:3000 -t /tmp/test/

अपने ब्राउज़र को http: // localhost: 3000 पर खोलें और अपने लिए देखें।

एक को आश्चर्य होगा कि हमें नामांकित बटन सबमिट करने की आवश्यकता क्यों होगी? यह बैक-एंड स्क्रिप्ट पर निर्भर करता है। उदाहरण के लिए WooCommerce वर्डप्रेस प्लगइन पोस्ट किए गए एक चेकआउट पेज को संसाधित नहीं करेगा, जब तक कि Place Orderनामित बटन भी सबमिट नहीं किया जाता है। यदि आप इसके प्रकार को सबमिट से बटन में बदलते हैं तो यह बटन सबमिट नहीं होगा और इस प्रकार चेकआउट फॉर्म कभी संसाधित नहीं होगा।

यह संभवतः एक छोटा विवरण है लेकिन आप जानते हैं, शैतान विवरण में है।


क्या यह युक्ति के अनुसार है या यह ब्राउज़र पर निर्भर है?
मैग्नस लिंड ऑक्सलबंड

0

<input type="button">कहीं भी इस्तेमाल किया जा सकता है, न कि केवल फॉर्म के भीतर और वे एक में होने पर फॉर्म जमा नहीं करते हैं। बहुत बेहतर के साथ अनुकूल है Javascript

<input type="submit">केवल प्रपत्रों में उपयोग किया जाना चाहिए और वे निर्दिष्ट URL पर अनुरोध (या तो GET या POST) भेजेंगे। उन्हें किसी भी HTML जगह में नहीं रखा जाना चाहिए ।


0

बटन तत्व के बारे में विनिर्देश पर W3C इसे स्पष्ट करता है

बटन को बिना किसी डिफ़ॉल्ट व्यवहार के सभी प्रकार के बटन के लिए एक सामान्य वर्ग के रूप में देखा जा सकता है।

W3C


0

type='Submit'BACK-END (PHP, .NET आदि) पर मूल्यों को अग्रेषित करने और प्राप्त करने के लिए सेट किया गया है। type='button'सामान्य बटन व्यवहार को प्रतिबिंबित करेगा।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.