इनपुट प्रकार = "सबमिट" बनाम बटन टैग क्या वे विनिमेय हैं?

Question

input type="submit"और buttonटैग वे विनिमेय हैं? या यदि कोई अंतर है तो कब input type="submit"और buttonकहाँ उपयोग करना है ?

और अगर कोई अंतर नहीं है तो हमारे पास एक ही उद्देश्य के लिए 2 टैग क्यों हैं?

Comments

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

— hippietrail

उपयोग करते समय एक मज़ेदार दिन से बचें buttonऔर valueIE के कुछ संस्करण में विशेषता, inputबस वही भेजेंगे जो आपको उम्मीद थी, IE के कुछ संस्करण buttonएस के साथ अच्छा नहीं खेलते हैं ।

— मारीजुनो

उत्तर मूल रूप से input type="button"बनाम के लिए समान हैं button type=button: stackoverflow.com/questions/469059/…

— Ciro Santilli 病 same same same

क्या इससे आपके सवाल का जवाब मिलता है? <बटन> बनाम <इनपुट प्रकार = "बटन" />। कौन सा उपयोग करें?

— 23

Answer 1

http://www.w3.org/TR/html4/interact/forms.html#h-17.5

बटन तत्व बटन के साथ बनाई गई बटन, INPUT तत्व के साथ बनाए गए बटन की तरह, लेकिन वे समृद्ध प्रतिपादन संभावनाएं प्रदान करते हैं: बटन तत्व में सामग्री हो सकती है। उदाहरण के लिए, एक बटन तत्व जिसमें एक छवि कार्य होता है जैसे कि और एक INPUT तत्व जैसा हो सकता है जिसका प्रकार "छवि" पर सेट है, लेकिन बटन तत्व प्रकार सामग्री की अनुमति देता है।

तो कार्यक्षमता के लिए केवल वे विनिमेय हैं!

(मत भूलो, के type="submit"साथ डिफ़ॉल्ट है button, इसलिए इसे छोड़ दो!)

Comments

बस सावधान रहें, IE6 पृष्ठ पर सभी बटन के मूल्यों को प्रस्तुत करता है, जिससे यह निर्धारित करना मुश्किल हो जाता है कि किस बटन पर क्लिक किया गया था। स्पष्टीकरण: vancelucas.com/blog/ie6-and-multiple-button-submit-elements

— सैम

बस FYI के लिए आपको बटन का उपयोग नहीं करना है type="submit", जैसा कि डिफ़ॉल्ट typeहै submit।

— सिंक

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

— MatTheCat

संदर्भ के अनुसार हाँ। लेकिन नहीं सभी ब्राउज़र संदर्भ ऐनक के लिए छड़ी, सही?

— इकाॅनडिली

@chharvey, पूर्व में बच्चे के नोड्स नहीं हो सकते हैं; अर्थात गैर-पाठ सामग्री। मुझे लगता है कि आप कह सकते हैं कि संक्षिप्तता से अलग होना बाद के अस्तित्व का कोई कारण नहीं है।

— पॉल ड्रेपर

Answer 2

यह <input type="button">केवल एक बटन है और कुछ भी अपने आप नहीं करेगा। <input type="submit">, जब क्लिक जब एक रूप तत्व के अंदर, प्रपत्र प्रस्तुत करेगा।

एक अन्य उपयोगी 'विशेष' बटन वह है <input type="reset">जो फ़ॉर्म को साफ़ करेगा।

Comments

सवाल बटन टैग के बारे में नहीं है <input type = "button">

— Caltor

सवाल के बारे में <input>और <button>टैग है। आपने <input>अपने उत्तर के बारे में उपयोगी जानकारी प्रदान की , लेकिन इसमें <button>पक्ष का अभाव है ।

— पमप्र

Answer 3

<इनपुट प्रकार = "बटन" ..> के बजाय <बटन> टैग का उपयोग करें । यह बूटस्ट्रैप 3 में सलाह दी गई प्रथा है।

http://getbootstrap.com/css/#buttons-tags

"क्रॉस-ब्राउज़र रेंडरिंग

एक सर्वोत्तम अभ्यास के रूप में, हम जब भी संभव हो, क्रॉस-ब्राउज़र रेंडरिंग को सुनिश्चित करने के लिए <बटन> तत्व का उपयोग करने की सलाह देते हैं।

अन्य बातों के अलावा, एक फ़ायरफ़ॉक्स बग है जो हमें <इनपुट> -बेड बटन की लाइन-ऊँचाई सेट करने से रोकता है, जिससे वे फ़ायरफ़ॉक्स पर अन्य बटन की ऊंचाई से बिल्कुल मेल नहीं खाते हैं। "

Comments

इसके लिए +1। buttonकहीं अधिक स्पष्ट है, और ariaसुलभता विशेषताओं के साथ आता है, और शैली के लिए कहीं अधिक आसान है। यह फॉरवर्ड-थिंकिंग भी है, क्योंकि यह एचटीएमएल 5 है।

— user1429980

Answer 4

यद्यपि दोनों तत्व कार्यात्मक रूप से एक ही परिणाम देते हैं *, मैं दृढ़ता से आपको उपयोग करने की सलाह देता हूं<button> :

• अधिक स्पष्ट और पठनीय है। inputसुझाव देता है कि नियंत्रण संपादन योग्य है , या उपयोगकर्ता द्वारा संपादित किया जा सकता है;buttonयह जिस उद्देश्य से कार्य करता है उसके संदर्भ में कहीं अधिक स्पष्ट है
• सीएसएस में शैली के लिए आसान; जैसा कि ऊपर बताया गया है, FIrefox और IE में quirks हैinput[type="submit"] कुछ मामलों में सही ढंग से प्रदर्शित नहीं होते हैं
• पूर्वनिर्धारित अनुरोध: IE में बहुत व्यवहार होता है जब मानों को सबमिट किया जाता है POST/GET सर्वर से अनुरोध
• मार्कअप के अनुकूल है; आप आइटम को घोंसले में रख सकते हैं, उदाहरण के लिए, आइकन, बटन के अंदर।
• एचटीएमएल 5, आगे की सोच; डेवलपर्स के रूप में, यह एक बार आधिकारिक होने के बाद नई कल्पना को अपनाना हमारी जिम्मेदारी है। HTML5, अभी के रूप में, एक साल से अधिक समय से आधिकारिक है, और एसईओ को बढ़ावा देने के लिए कई मामलों में दिखाया गया है ।

* _{जिसके अपवाद के साथ डिफ़ॉल्ट रूप से कोई निर्दिष्ट व्यवहार नहीं है।<button type="button">}

संक्षेप में, मैं अत्यधिक उपयोग को हतोत्साहित करता हूं<input type="submit" /> ।

Comments

धन्यवाद। मैं इस के लिए देख रहा था, विशेष रूप से HTML5 अर्थ बिंदु के लिए। 2020 में, हमें शुद्ध कार्यक्षमता से परे सोचना होगा।

— पियरे_लॉनिक

Answer 5

<input type='submit' />इसके अंदर HTML का समर्थन नहीं करता है, क्योंकि यह एक एकल स्व-समापन टैग है। <button>दूसरी ओर, HTML, छवियों आदि का समर्थन करता है क्योंकि यह एक टैग जोड़ी है <button><img src='myimage.gif' /></button>:। <button>सीएसएस स्टाइलिंग की बात करें तो यह और अधिक लचीला है।

इसका नुकसान <button>यह है कि यह पुराने ब्राउज़रों द्वारा पूरी तरह से समर्थित नहीं है। IE6 / 7, उदाहरण के लिए, इसे सही ढंग से प्रदर्शित न करें।

जब तक आपके पास कुछ विशिष्ट कारण नहीं है, तब तक शायद रहना सबसे अच्छा है <input type='submit' />।

Comments

जवाब 2 साल पहले से था। इसके अलावा, वैकल्पिक बटन पाठ को निर्दिष्ट करना बहुत संभव है:<input type="submit" value="Log In" />

— Jared Ng

@ नाविक आप पूरी तरह से अपनी राय के हकदार हैं, लेकिन कोई भी जवाब प्रौद्योगिकी की वर्तमान स्थिति को अनिवार्य रूप से संदर्भित करने वाला है। शायद HTML 6 <button>कुछ नया करने के पक्ष में जाएगा । क्या इसका मतलब है कि हमें जवाब में एक विशिष्ट टैग का उल्लेख नहीं करना चाहिए, क्योंकि यह भविष्य में किसी बिंदु पर बदल सकता है ? मैं यह निर्धारित करने के लिए पाठक के लिए एक अभ्यास के रूप में छोड़ना पसंद करूंगा कि उनकी स्थिति पर उत्तर कैसे लागू होते हैं। जब तक जानकारी पाठक के लिए मूल्यवान है, तब तक मुझे इसमें समस्या नहीं दिखाई देती।

— जारेड एनजी

जिस समय उत्तर लिखा गया था, IE6 / 7 पहले से ही पुराने थे। एक नया वेब डेवलपर आपके पोस्ट को पढ़ रहा है, आपके समर्थन के तर्कों की जांच किए बिना और यह महसूस करता है कि वे अब लागू नहीं होते हैं, यह सोचते हैं कि 'बटन' तत्वों का उपयोग न करने का अच्छा कारण है।

— मिकमेकाना

@nailer कोई भी सार्वभौमिक "पुराना" ब्राउज़र सूची नहीं है जिसका पालन सभी के द्वारा किया जाता है। समर्थित ब्राउज़रों के लिए अलग-अलग कार्यस्थलों की अलग-अलग आवश्यकताएं हैं। सिर्फ इसलिए कि 2011 में "समर्थित ब्राउज़र" के आपके मानक में IE6 / 7 शामिल नहीं था, इसका मतलब यह नहीं है कि हर जगह ऐसा ही है।

— जारेड Ng

मुझे पता है कि ब्राउज़र की सूची से कोई सार्वभौमिक "पुराना नहीं है" - इसलिए हर कोई ऐसी बात का उल्लेख नहीं करता है। मैं केवल इतना कह रहा हूं कि इसे "IE6 / 7 सही ढंग से डिस्प्ले बटन का समर्थन नहीं करता है।" यदि यह चिंता का विषय है, तो इनपुट से चिपके रहें, यानी आप जानते हैं कि ब्राउज़र बदल जाएगा, इसके लिए खाता है। यह स्टैकऑवरफ्लो IE6 वर्कअराउंड पर हमेशा के लिए रुक जाता है।

— मिकमेकाना

Answer 6

मुझे लगता है कि यह एक पुराना प्रश्न है लेकिन मुझे यह mozilla.org पर मिला और लगता है कि यह लागू होता है।

एक बटन तीन प्रकार का हो सकता है: सबमिट, रीसेट या बटन। सबमिट बटन पर क्लिक करने से तत्व के एक्शन विशेषता द्वारा परिभाषित वेब पेज पर फॉर्म का डेटा भेजा जाता है।

रीसेट बटन पर क्लिक करने से सभी फॉर्म विजेट्स उनके डिफ़ॉल्ट मूल्य पर तुरंत रीसेट हो जाते हैं। UX के दृष्टिकोण से, यह बुरा अभ्यास माना जाता है।

एक बटन बटन पर एक क्लिक करता है ... कुछ भी नहीं! यह मूर्खतापूर्ण लगता है, लेकिन यह जावास्क्रिप्ट के साथ कस्टम बटन बनाने के लिए आश्चर्यजनक रूप से उपयोगी है।

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish

Comments

यदि यह कुछ नहीं करता है तो यह कैसे उपयोगी है?

— हनी

क्योंकि आप तब जावास्क्रिप्ट के माध्यम से क्लिक इवेंट के लिए हैंडलर को हुक कर सकते हैं

— fonso

@ उदाहरण के लिए, आप <button type="button">अगली स्लाइड में एक स्लाइडर / हिंडोला अग्रिम करने के लिए कोड कर सकते हैं ।

— छरवे

Answer 7

<button>से नया है <input type="submit">, और अधिक अर्थपूर्ण है, इसके अंदर HTML को स्टाइल करना और समर्थन करना आसान है।

Answer 8

जबकि अन्य उत्तर बहुत अच्छे हैं और इस सवाल का जवाब देते हैं कि उपयोग करते समय input type="submit"और विचार करने के लिए एक चीज है button। एक साथ input type="submit"आप उपयोग नहीं कर सकते इनपुट पर एक सीएसएस छद्म तत्व, लेकिन आप यह कर सकते हैं एक बटन के लिए!

buttonजब यह स्टाइल की बात आती है, तो इनपुट पर एक तत्व का उपयोग करने का यह एक कारण है ।

Answer 9

मुझे नहीं पता कि यह बग या फ़ीचर है, लेकिन मेरे लिए बहुत महत्वपूर्ण (कुछ मामलों में कम से कम) अंतर है: <input type="submit">आपके अनुरोध में मुख्य मूल्य जोड़ी बनाता है और<button type="submit"> नहीं। क्रोम और सफारी में परीक्षण किया गया।

इसलिए जब आपके पास आपके फॉर्म में कई सबमिट बटन होते हैं और यह जानना चाहते हैं कि किस पर क्लिक किया गया है - इसके बजाय buttonउपयोग न करें input type="submit"।

Comments

मेरे एक्सपायरीनेस के आसपास इसके बिल्कुल दूसरे तरीके से, बटन $ _POST ["submit_name"] और इनपुट पास नहीं होता है। क्रोम पर परीक्षण किया गया। फ़ायरफ़ॉक्स $ _POST ["submit_name"] को भेजता है।

— गैल एनोनिम

@GallAnnonim शायद दस्तावेज़ प्रकार पर निर्भर करता है। क्योंकि मैं निश्चित रूप से इनपुट प्रकार = जमा का उपयोग करता हूं और यह क्रोम पर काम करता है

— इवान यारीच

Intresting ... मैंने <<! DOCTYPE html> का उपयोग करते हुए lang "pl" && एन्कोडिंग utf-8 का उपयोग किया है, अगर यह कोई भिन्नता बनाता है। क्रोम 58.0.3029.96

— गैल एनोनिम

Answer 10

अगर आप बात कर रहे हैं <input type=button> , यह स्वचालित रूप से फार्म जमा नहीं करेगा

अगर आप के बारे में बात कर रहे हैं <button> टैग के , तो यह नया है और सभी ब्राउज़रों में स्वचालित रूप से सबमिट नहीं होता है।

नीचे पंक्ति, यदि आप चाहते हैं कि फॉर्म सभी ब्राउज़रों में क्लिक पर सबमिट हो, तो उपयोग करें <input type="submit">

Comments

आप <button type="submit">ऑटो-सबमिट फॉर्म का उपयोग कर सकते हैं ।

— जम्पनेट