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

Question

उनके बारे में कई किंवदंतियाँ हैं। मैं सच्चाई जानना चाहता हूं। निम्नलिखित दो उदाहरणों के बीच अंतर क्या हैं?

1. <input type='submit' value='text' />

2. <button type='submit'>text</button>

Comments

क्या आपका मतलब <input type="submit">और है <button type="submit">?

— kennytm

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

— हकान Fıstık

inputएक शून्य तत्व है। उपयोग न करें <input />, बस उपयोग करें <input>।

— CDT

@ HakanFıstık, इसका एक हिस्सा नहीं है, यह एक (कम या ज्यादा सूक्ष्म रूप से) अलग है, उदाहरण के type=submitलिए buttonवहाँ भी एक चिंता का विषय नहीं था (संभावना है क्योंकि यह एसटीडी का हिस्सा भी नहीं था। वापस तो (AFAIK)। जब वह अन्य प्रश्न पूछा गया)।

— एस.जे.

Answer 1

सुनिश्चित नहीं हैं कि आप अपने किंवदंतियों को कहाँ से प्राप्त करते हैं:

के साथ बटन सबमिट करें <button>

साथ ही:

<button type="submit">(html content)</button>

IE6 टैग के बीच इस बटन के लिए सभी पाठ प्रस्तुत करेगा, अन्य ब्राउज़र केवल मूल्य जमा करेंगे। उपयोग करने <button>से आपको बटन के डिजाइन पर अधिक लेआउट स्वतंत्रता मिलती है। अपने सभी इरादों और उद्देश्यों में, यह पहली बार में उत्कृष्ट लग रहा था, लेकिन विभिन्न ब्राउज़र quirks इसे कई बार उपयोग करना कठिन बनाते हैं।

आपके उदाहरण में, IE6 textसर्वर को भेज देगा , जबकि अधिकांश अन्य ब्राउज़र कुछ भी नहीं भेजेंगे। इसे क्रॉस-ब्राउज़र संगत बनाने के लिए, उपयोग करें <button type="submit" value="text">text</button>। बेहतर अभी तक: मूल्य का उपयोग न करें, क्योंकि यदि आप HTML जोड़ते हैं तो यह मुश्किल हो जाता है जो सर्वर साइड पर प्राप्त होता है। इसके बजाय, यदि आपको अतिरिक्त मूल्य भेजना है, तो छिपे हुए फ़ील्ड का उपयोग करें।

के साथ बटन <input>

साथ ही:

<input type="button" />

डिफ़ॉल्ट रूप से, यह कुछ भी नहीं के बगल में है। यह आपका फॉर्म भी जमा नहीं करेगा। आप केवल बटन पर पाठ रख सकते हैं और इसे सीएसएस के माध्यम से एक आकार और सीमा दे सकते हैं। इसका मूल (और वर्तमान) इरादा सर्वर को फ़ॉर्म जमा करने की आवश्यकता के बिना एक स्क्रिप्ट निष्पादित करना था।

के साथ सामान्य सबमिट बटन <input>

साथ ही:

<input type="submit" />

पूर्व की तरह, लेकिन वास्तव में आसपास के रूप को प्रस्तुत करता है।

छवि सबमिट बटन के साथ <input>

साथ ही:

<input type="image" />

पूर्व (सबमिट) की तरह, यह भी एक फॉर्म सबमिट करेगा, लेकिन आप किसी भी छवि का उपयोग कर सकते हैं। जब फ़ॉर्म को सबमिट करने की आवश्यकता होती है तो यह बटन के रूप में छवियों का उपयोग करने का पसंदीदा तरीका होता है। अधिक नियंत्रण के लिए, <button>अब उपयोग किया जाता है। यह सर्वर साइड इमेज मैप के लिए भी इस्तेमाल किया जा सकता है, लेकिन इन दिनों यह दुर्लभ है। जब आप usemap-attribute और (उस विशेषता के साथ या उसके बिना) का उपयोग करते हैं, तो ब्राउज़र माउस-पॉइंटर X / Y को सर्वर को भेज देगा (अधिक सटीक रूप से, माउस-पॉइंटर स्थान उस पल के बटन के अंदर जिसे आप इसे क्लिक करते हैं)। यदि आप इन एक्स्ट्रा को अनदेखा करते हैं, तो यह एक छवि के रूप में प्रच्छन्न सबमिट बटन से अधिक कुछ नहीं है।

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

Comments

चूंकि आप वैसे भी संपादन कर रहे हैं, IE6 के बारे में बात अभी भी quirks मोड में IE11 के साथ सही है। (फिर भी एक और कारण quirks मोड का उपयोग नहीं करने के लिए)। हालांकि एज में फिक्स्ड। ओह, और <इनपुट> और <बटन> के बीच अधिक अंतर हैं: <इनपुट> में white-space:preडिफ़ॉल्ट रूप से है, <बटन> नहीं है। व्यूपोर्ट की तुलना में बटन को व्यापक बनाने का प्रयास करते समय यह स्पष्ट हो जाता है।

— मिस्टर लिस्टर

Answer 2

के साथ <button>, जहाँ आप पाठ है, आदि का उपयोग कर सकते हैं

<button type='submit'> text -- can be img etc.  </button>

<input>प्रकार के साथ , आप पाठ तक सीमित हैं

Comments

साथ <input type="image" />एक प्रस्तुत आप पाठ तक सीमित नहीं हैं और यह भी प्रदर्शन करती है।

— हाबेल

@ अविश्वास: यह एक छवि मानचित्र बनाने के लिए अधिक है जो बदले में माउस पॉइंटर स्थिति name.xऔर name.yमापदंडों के रूप में भेजता है (ध्यान दें कि nameपैरामीटर मौजूद नहीं है!)। मैं <input type="submit">एक सीएसएस पृष्ठभूमि के साथ उपयोग करना चाहता हूं यदि एकमात्र उद्देश्य पृष्ठभूमि छवि के साथ एक बटन है।

— बालुसक

@BalusC: सच है, लेकिन यह उद्देश्य है, HTML 2.0 मानक लिखने के समय, जब कोई सीएसएस नहीं था, जैसा कि वर्णित था, एक बटन के रूप में या सर्वर-साइड छवि मानचित्र के रूप में एक छवि का उपयोग करने के लिए । लेकिन वास्तव में, आप सीएसएस और एचटीएमएल के साथ ऐसा करने के लिए एक पृष्ठभूमि छवि के साथ एक सामान्य बटन का उपयोग कर सकते हैं (ab)।

— हाबेल

@ अवि: ऐसा कभी नहीं था input type="image"। उसके लिए <button type="submit">इरादा है।

— बालुसक

@ बाल्सक: शायद हम मानक को अलग तरह से समझते हैं, लेकिन यह HTML 2.0 मानक के लिए ली के मूल पाठ में है: " TYPE=IMAGE' implies TYPE = SUBMIT 'प्रसंस्करण; अर्थात्, जब एक पिक्सेल चुना जाता है, तो एक पूरे के रूप में प्रस्तुत किया जाता है।" । इसे जो आप सोचते हैं, उसका असली इरादा बनाएं :)

— हाबिल

Answer 3

संक्षेप में :

<input type="submit">

<button type="submit"> Submit </button>

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

हालांकि, इसका उपयोग करने की सिफारिश की गई है <button type="submit">क्योंकि इसमें बेहतर शब्दार्थ, बेहतर ARIA समर्थन है और यह स्टाइल करना आसान है।