जब अधिकांश साइटों (एसओ सहित) को देखते हैं, तो उनमें से अधिकांश का उपयोग होता है:
<input type="button" />के बजाय:
<button></button><button>संगतता मुद्दों के साथ आता है, यह देखते हुए कि यह बहुत व्यापक रूप से उपयोग नहीं किया जाता है?जवाबों:
<button></button>)<button></button>(संकेत: IE6)उपयोग करते समय एक और IE समस्या <button />:
और जब हम IE के बारे में बात कर रहे हैं, यह बटन की चौड़ाई से संबंधित कीड़े के एक जोड़े को मिला है। जब आप शैलियों को जोड़ने का प्रयास कर रहे हैं, तो यह रहस्यमय तरीके से अतिरिक्त पैडिंग जोड़ देगा, जिसका अर्थ है कि आपको नियंत्रण में आने वाली चीजों को प्राप्त करने के लिए एक छोटे से हैक को जोड़ना होगा।
<button />इसकी एक formविशेषता (और संबंधित विशेषताएँ) हैं, इसलिए इसे दस्तावेज़ निकाय के अन्य भागों में प्रपत्रों से जोड़ा जा सकता है।
बस एक साइड नोट के रूप में, <button>संक्षेप में प्रस्तुत करना होगा, जो समस्या का कारण बन सकता है यदि आप इसे सबमिट किए बिना एक बटन का उपयोग करना चाहते हैं। इस प्रकार, उपयोग करने का एक और कारण <input type="button">(या <button type="button">)
संपादित करें - अधिक विवरण
एक प्रकार के बिना, buttonअंतर्निहित रूप से प्रकार प्राप्त होता हैsubmit । इससे कोई फर्क नहीं पड़ता कि फॉर्म में कितने सबमिट बटन या इनपुट हैं, उनमें से कोई भी जो स्पष्ट रूप से या अंतर्निहित रूप से टाइप किया गया है, जब क्लिक किया जाता है, तो वह फॉर्म सबमिट करेगा।
एक बटन के लिए 3 समर्थित प्रकार हैं
submit || "submits the form when clicked (default)"
reset || "resets the fields in the form when clicked"
button || "clickable, but without any event handler until one is assigned"
submitडिफ़ॉल्ट जब रूपों में से 99.9% की एक बहुत कुछ है के रूप में buttonके साथ एक submit ?!
यह लेख अंतर का बहुत अच्छा अवलोकन प्रदान करता है।
पृष्ठ से:
बटन तत्व बटन के साथ बनाई गई बटन, जैसे बटन INPUT तत्व के साथ बनाए गए हैं, लेकिन वे समृद्ध प्रतिपादन संभावनाएं प्रदान करते हैं: बटन तत्व में सामग्री हो सकती है। उदाहरण के लिए, एक बट्टन तत्व जिसमें एक छवि कार्य होता है जैसे और एक INPUT तत्व जैसा हो सकता है जिसका प्रकार "छवि" पर सेट है, लेकिन बटन तत्व प्रकार सामग्री की अनुमति देता है।
बटन तत्व - W3C
उद्धरण
महत्वपूर्ण: यदि आप HTML रूप में बटन तत्व का उपयोग करते हैं, तो विभिन्न ब्राउज़र अलग-अलग मान प्रस्तुत करेंगे। इंटरनेट एक्सप्लोरर पाठ
<button>और</button>टैग के बीच में जमा करेगा , जबकि अन्य ब्राउज़र मूल्य विशेषता की सामग्री प्रस्तुत करेंगे। HTML फॉर्म में बटन बनाने के लिए इनपुट एलिमेंट का उपयोग करें।
से: http://www.w3schools.com/tags/tag_button.asp
अगर मैं सही तरीके से समझूं, तो उत्तर संगतता और ब्राउज़र से ब्राउज़र की इनपुट स्थिरता है
मैं लेख एंकर, इनपुट और बटन के बीच अंतर को उद्धृत करूंगा :
एंकर ( <a>तत्व) हाइपरलिंक का प्रतिनिधित्व करता है, संसाधन एक व्यक्ति एक ब्राउज़र में नेविगेट या डाउनलोड कर सकता है। यदि आप अपने उपयोगकर्ता को एक नए पृष्ठ पर जाने या फ़ाइल डाउनलोड करने की अनुमति देना चाहते हैं, तो एक एंकर का उपयोग करें।
एक इनपुट ( <input>) एक डेटा फ़ील्ड का प्रतिनिधित्व करता है: इसलिए कुछ उपयोगकर्ता डेटा जो आपको सर्वर पर भेजने का मतलब है। बटन से संबंधित कई इनपुट प्रकार हैं:
<input type="submit"><input type="image"><input type="file"><input type="reset"><input type="button">उनमें से प्रत्येक का एक अर्थ है, उदाहरण के लिए " फ़ाइल " का उपयोग किसी फ़ाइल को अपलोड करने के लिए किया जाता है, " रीसेट " एक फ़ॉर्म को साफ़ करता है, और " सबमिट " डेटा को सर्वर पर भेजता है। MDN पर या W3Schools पर W3 संदर्भ की जाँच करें ।
बटन ( <button>)तत्व काफी बहुमुखी है:
::beforeऔर ::afterछद्म तत्वों;disabledविशेषता का समर्थन करते हैं। इससे उन्हें चालू और बंद करना आसान हो जाता है।फिर से, के लिए डब्ल्यू 3 संदर्भ जाँच <button>टैग MDN पर या W3Schools पर ।
HTML मैनुअल में फ़ॉर्म पृष्ठ का हवाला देते हुए :
बटन तत्व बटन के साथ बनाई गई बटन, जैसे बटन INPUT तत्व के साथ बनाए गए हैं, लेकिन वे समृद्ध प्रतिपादन संभावनाएं प्रदान करते हैं: बटन तत्व में सामग्री हो सकती है। उदाहरण के लिए, एक BUTTON तत्व जिसमें एक छवि कार्य होता है जैसे और एक INPUT तत्व जैसा हो सकता है जिसका प्रकार "छवि" पर सेट है, लेकिन BUTTON तत्व प्रकार सामग्री की अनुमति देता है।
यदि आप प्रपत्र में बटन बनाना चाहते हैं, तो इनपुट तत्व से बटन का उपयोग करें। और यदि आप कार्रवाई के लिए बटन बनाना चाहते हैं तो बटन टैग का उपयोग करें।
<button>बनाम
<input type='button'>-
आधुनिक ब्राउज़रों में, दोनों तत्व सीएसएस के साथ आसानी से शैली में हैं लेकिन ज्यादातर मामलों में, buttonतत्व को पसंद किया जाता है क्योंकि आप आंतरिक HTML और छद्म तत्वों के साथ अधिक स्टाइल कर सकते हैं।
जहाँ तक CSS स्टाइलिंग का सवाल है, <button type="submit" class="Btn">Example</button>यह बेहतर है क्योंकि यह आपको CSS :beforeऔर :after छद्म वर्गों का उपयोग करने की क्षमता देता है जो मदद कर सकता है।
<input type="button">नेत्रहीन रेंडरिंग के कारण अलग-अलग <a>या <span>जब कुछ स्थितियों में कक्षाओं के साथ स्टाइल किया जाता है तो मैं उनसे बचता हूं।
यह बहुत ही ध्यान देने योग्य है कि वर्तमान शीर्ष उत्तर 2009 में लिखा गया था। IE6 अब चिंता का विषय नहीं है, इसलिए <button type="submit">Wins</button>मेरी आँखों में स्टाइलिंग की निरंतरता शीर्ष पर आती है।
यदि आप jQuery का उपयोग कर रहे हैं तो एक बड़ा अंतर है। jQuery इनपुट पर अधिक घटनाओं से अवगत है, क्योंकि यह बटन पर है। बटन पर, jQuery केवल 'क्लिक' घटनाओं से अवगत है। इनपुट्स पर, jQuery 'क्लिक', 'फ़ोकस' और 'ब्लर' ईवेंट से अवगत है।
आप हमेशा आवश्यकतानुसार अपने बटनों में घटनाओं को बाँध सकते हैं, लेकिन बस इस बात से अवगत रहें कि jQuery द्वारा स्वचालित रूप से ज्ञात होने वाली घटनाएं अलग हैं। उदाहरण के लिए, यदि आपने एक ऐसा फंक्शन बनाया है जिसे जब भी आपके पेज पर 'फ़ोकसिन' की घटना होती है, तो एक इनपुट फंक्शन को ट्रिगर करता है लेकिन एक बटन नहीं होगा।
<button>इसमें लचीला है कि इसमें HTML हो सकता है। इसके अलावा, सीएसएस का उपयोग करके स्टाइल करना बहुत आसान है, और स्टाइल वास्तव में सभी ब्राउज़रों में लागू होता है। हालाँकि, Internet Explorer (Eww! IE!) के संबंध में कुछ कमियाँ हैं। Internet Explorer मूल्य के रूप में टैग की सामग्री का उपयोग करते हुए, मूल्य विशेषता का ठीक से पता नहीं लगाता है। प्रपत्र के सभी मानों को सर्वर-साइड में भेजा जाता है, भले ही बटन पर क्लिक किया गया हो या नहीं। यह इसे एक <button type="submit">मुश्किल और दर्द के रूप में उपयोग करता है।
<input type="submit">दूसरी ओर किसी भी मूल्य या पता लगाने के मुद्दे नहीं है, लेकिन आप, जैसा कि आप के साथ HTML जोड़ सकते हैं <button>। यह शैली के लिए भी कठिन है, और स्टाइल हमेशा सभी ब्राउज़रों में अच्छी प्रतिक्रिया नहीं देता है। आशा है कि इससे मदद मिली।
मैं यहाँ बाकी उत्तरों में कुछ जोड़ना चाहता हूँ। इनपुट तत्वों को रिक्त या शून्य तत्व माना जाता है (अन्य खाली तत्व क्षेत्र, आधार, br, col, hr, img, input, link, meta, और param हैं। आप यहां भी देख सकते हैं ), जिसका अर्थ है कि उनके पास कोई सामग्री नहीं हो सकती है। किसी भी सामग्री के नहीं होने के अलावा, खाली तत्वों में कोई छद्म तत्व नहीं हो सकते हैं जैसे :: बाद में और पहले :, जिसे मैं एक बड़ी कमी मानता हूं।
इसके अलावा, मतभेदों में से एक पुस्तकालय के प्रदाता से आ सकता है, और वे क्या कोड करते हैं। उदाहरण के लिए मैं मोबाइल कोणीय यूआई के साथ संयोजन में कॉर्डोवा प्लेटफॉर्म का उपयोग कर रहा हूं, और जबकि इनपुट / डिव / आदि टैग एनजी-क्लिक के साथ अच्छी तरह से काम करते हैं, बटन विजुअल स्टूडियो डीबगर को क्रैश करने का कारण बन सकता है, निश्चित रूप से मतभेदों के कारण, जो प्रोग्रामर ने उत्पन्न किया; ध्यान दें कि एक ही मुद्दे पर MattC उत्तर इंगित करता है, jQuery सिर्फ एक काम है, और प्रदाता ने एक तत्व पर कुछ कार्यक्षमता के बारे में नहीं सोचा, यह s / वह दूसरे पर प्रदान करता है। इसलिए जब आप एक पुस्तकालय का उपयोग कर रहे हैं, तो आप एक तत्व के साथ एक समस्या का सामना कर सकते हैं, जिसे आप दूसरे के साथ सामना नहीं करेंगे। और बस लोकप्रिय की तरह input, ज्यादातर फिक्स्ड एक हो जाएगा, सिर्फ इसलिए कि यह अधिक लोकप्रिय है।
हालाँकि यह एक बहुत पुराना सवाल है और शायद यह प्रासंगिक नहीं है, कृपया ध्यान रखें कि जिन समस्याओं के लिए <button>टैग का उपयोग किया गया है उनमें से अधिकांश अब मौजूद नहीं हैं और इसलिए इसका उपयोग करने की अत्यधिक सलाह दी जाती है।
यदि आप विभिन्न कारणों से ऐसा नहीं कर सकते हैं, तो एक्सेस के रूप में अपने टैग में विशेषता भूमिका = "बटन" जोड़ने के लिए ध्यान रखें। यह लेख काफी जानकारीपूर्ण है: https://www.deque.com/blog/accessible-aria-buttons/
<button>अब उपयोग नहीं करने का कोई कारण नहीं है ?