HTML बटन: चरण-दर-चरण मार्गदर्शिका

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

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

यहीं HTML <button> टैग काम आता है। बटन टैग का उपयोग HTML में HTML फॉर्म के भीतर एक क्लिक करने योग्य बटन बनाने के लिए किया जाता है और यह यूजर को फॉर्म में जानकारी को वेबसाइट पर सबमिट करने में सक्षम बनाता है।

इस ट्यूटोरियल में, हम HTML में <button> टैग का उपयोग कैसे करें, इस पर चर्चा करने जा रहे हैं। हम एक कस्टम बटन बनाने के लिए उपयोग की जा सकने वाली विशेषताओं पर भी चर्चा करेंगे, और इन विशेषताओं के कुछ उदाहरणों का पता लगाएंगे।

HTML फॉर्म रिफ्रेशर

HTML फॉर्म्स का उपयोग वेब पेज पर विभिन्न प्रकार के यूजर इनपुट एकत्र करने के लिए किया जाता है, जैसे नाम, फोन नंबर, या पते।

प्रत्येक फॉर्म में इनपुट एलिमेंट्स होते हैं जो यूजर्स को वेबसाइट पर जानकारी सबमिट करने की अनुमति देते हैं। उदाहरण के लिए, एक वेब पेज में ऑर्डर फॉर्म हो सकता है जिसमें यूजर का नाम, जन्म तिथि, क्रेडिट कार्ड जानकारी, और बहुत कुछ एकत्र करने के लिए फॉर्म एलिमेंट्स होते हैं।

<form> टैग का उपयोग HTML में फॉर्म बनाने के लिए किया जाता है। यहां <form> टैग का एक सरल उदाहरण दिया गया है जिसका उपयोग यूजर का नाम एकत्र करने वाले फॉर्म को बनाने के लिए किया जाता है:

<form> नाम: <input type="text"> </form>

एक फॉर्म टैग में कई <input> टैग्स, या अन्य यूजर इनपुट एलिमेंट्स जैसे सेलेक्ट बॉक्स शामिल हो सकते हैं। इसके अलावा, एक फॉर्म में एक <button> टैग शामिल होना चाहिए जो, जब क्लिक किया जाता है, तो यूजर की जानकारी को वेबसाइट पर सबमिट करेगा।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद वे अपनी टेक जॉब संभावनाओं के बारे में अधिक आश्वस्त महसूस करते हैं। आज ही बूटकैंप से जुड़ें।

औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी पाने तक।

HTML बटन

<button> टैग आपको HTML फॉर्म के भीतर एक क्लिक करने योग्य बटन बनाने की अनुमति देता है। उदाहरण के लिए, यदि आपके पास एक फॉर्म है जो भुगतान जानकारी एकत्र करता है, तो आप फॉर्म के अंत में एक <button> रख सकते हैं ताकि यूजर उस डेटा को आपकी साइट पर सबमिट कर सके।

<button> टैग में एक शुरुआत और अंत टैग होना चाहिए, और इसमें type विशेषता के लिए एक मान भी शामिल होना चाहिए। type विशेषता, जैसा कि हम बाद में चर्चा करेंगे, फॉर्म को बताती है कि किस प्रकार का बटन रेंडर किया जाना चाहिए।

यहां HTML <button> टैग का एक उदाहरण दिया गया है:

<button type="submit" value="साइन अप">साइन अप</button>

यहां बताया गया है कि हमारा बटन वेब पेज पर कैसे दिखाई देता है:

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

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

HTML बटन टैग विशेषताएँ

HTML <button> टैग में कई विशेषताएँ शामिल हैं जिनका उपयोग कस्टम बटन बनाने के लिए किया जा सकता है। इसके अलावा, <button> टैग HTML5 में ग्लोबल विशेषताओं का समर्थन करता है। आइए मुख्य HTML <button> टैग विशेषताओं का विस्तार से पता लगाएं।

ऑटोफोकस (Autofocus)

autofocus विशेषता का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि वेब पेज लोड होने पर बटन को स्वचालित रूप से फोकस प्राप्त होना चाहिए। autofocus विशेषता का सिंटैक्स यहां दिया गया है:

<button type="submit" autofocus>टेस्ट बटन!</button>

डिसेबल्ड (Disabled)

disabled विशेषता बटन को अक्षम करती है, जिसका अर्थ है कि यूजर्स एलिमेंट के साथ इंटरैक्ट नहीं कर सकते। disabled विशेषता का सिंटैक्स यहां दिया गया है:

<button type="submit" disabled>टेस्ट बटन!</button>

जैसा कि आप नीचे देख सकते हैं, हमारा बटन ग्रे हो गया है और इस पर क्लिक नहीं किया जा सकता:

फॉर्म (Form)

form विशेषता का उपयोग बटन एलिमेंट को फॉर्म से लिंक करने के लिए किया जाता है। form विशेषता का मान उस फॉर्म के id के बराबर होना चाहिए जिससे फॉर्म संबंधित है। यहां form विशेषता का एक उदाहरण दिया गया है जो सबमिट बटन को हमारे pizza फॉर्म से लिंक करता है:

<form id="pizza"> फ्लेवर: <input type="text" name="flavor"> </form> <button type="submit" form="pizza">ऑर्डर सबमिट करें</button>

form विशेषता ने हमारे बटन को pizza id मान वाले फॉर्म से लिंक किया है। इसलिए, जब हम अपने बटन पर क्लिक करते हैं, तो id pizza वाला हमारा फॉर्म सबमिट हो जाएगा।

फॉर्मएक्शन (Formaction)

formaction उस प्रोग्राम का URL निर्दिष्ट करता है जो बटन द्वारा सबमिट की गई जानकारी को प्रोसेस करेगा। इस विशेषता का उपयोग केवल तभी किया जा सकता है जब आपके बटन में type विशेषता submit के बराबर हो।

यहां formaction विशेषता के उपयोग का एक उदाहरण है:

<button type="submit" formaction="https://www.ourpizzawebsite.com/submitOrder.php">ऑर्डर सबमिट करें</button>

फॉर्मएनकटाइप (Formenctype)

formenctype विशेषता निर्दिष्ट करती है कि फॉर्म डेटा को सर्वर पर सबमिट करते समय कैसे एन्कोड किया जाना चाहिए। इस विशेषता का उपयोग केवल तब किया जाना चाहिए जब आपके फॉर्म में " method='post' " विशेषता का उपयोग किया जा रहा हो।

यहां formenctype विशेषता का एक उदाहरण दिया गया है जिसका उपयोग हमारे बटन पर क्लिक होने पर सर्वर पर प्लेन टेक्स्ट भेजने के लिए किया जाता है:

<button type="submit" formenctype="text/plain">ऑर्डर सबमिट करें</button>

फॉर्ममेथड (Formmethod)

formmethod का उपयोग ब्राउज़र द्वारा फॉर्म सबमिट करने के लिए उपयोग किए जाने वाले HTTP मेथड को निर्दिष्ट करने के लिए किया जाता है। इस विशेषता का उपयोग केवल " type='submit' " विशेषता के साथ किया जाना चाहिए।

formmethod विशेषता के लिए दो स्वीकृत मान get और post हैं। यदि आप जानकारी पुनर्प्राप्त करना चाहते हैं या HTTP GET फंक्शन निष्पादित करना चाहते हैं, तो आपको get का उपयोग करना चाहिए; यदि आप जानकारी भेजना चाहते हैं या HTTP POST फंक्शन निष्पादित करना चाहते हैं, तो आपको post का उपयोग करना चाहिए।

यहां formmethod विशेषता का सिंटैक्स है:

<button type="submit" formmethod="post">ऑर्डर सबमिट करें</button>

फॉर्मनोवैलिडेट (Formnovalidate)

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

यहां formnovalidate का एक उदाहरण दिया गया है:

<button type="submit" formnovalidate>ऑर्डर सबमिट करें</button>

फॉर्मटार्गेट (Formtarget)

formtarget सर्वर द्वारा फॉर्म सबमिट होने के बाद भेजी गई प्रतिक्रिया के लिए लक्ष्य स्थान सेट करता। इस विशेषता के लिए स्वीकृत मान हैं: _blank, _self, _parent, _top, या आपके iframe का नाम।

यहां formtarget विशेषता का सिंटैक्स है:

<button formtarget="_blank">ऑर्डर सबमिट करें</button>

नाम (Name)

name टैग का उपयोग बटन के नाम को निर्दिष्ट करने के लिए किया जाता है (जो अन्य सभी फॉर्म एलिमेंट नामों से अद्वितीय होना चाहिए), और निम्न सिंटैक्स का उपयोग करता है:

<button name="submit_order">ऑर्डर सबमिट करें</button>

प्रकार (Type)

type टैग बटन के प्रकार को निर्दिष्ट करता है। तीन बटन प्रकार हैं जिनका उपयोग किया जा सकता है: button, submit, और reset। यहां type टैग का सिंटैक्स है:

<button type="submit">ऑर्डर सबमिट करें</button>

मान (Value)

value टैग बटन के प्रारंभिक मान को निर्दिष्ट करता है। यहां value टैग का सिंटैक्स है:

<button type="submit" value="ऑर्डर सबमिट करें">ऑर्डर सबमिट करें</button>

निष्कर्ष

<button> टैग का उपयोग HTML फॉर्म में एक क्लिक करने योग्य बटन बनाने के लिए किया जा सकता है। उदाहरण के लिए, यदि आपके पास एक फॉर्म है जो यूजर को पिज्जा ऑर्डर करने की अनुमति देता है, तो आप एक <button> टैग चाहेंगे जो यूजर को उनकी ऑर्डर की जानकारी सबमिट करने में सक्षम बनाता है जब वे तैयार हों।

इस ट्यूटोरियल में, हमने HTML में <button> टैग का उपयोग कैसे करें, इसका पता लगाया। हमने टैग के साथ उपयोग की जा सकने वाली मुख्य विशेषताओं पर भी चर्चा की, और उन विशेषताओं के उपयोग के कुछ उदाहरणों का पता लगाया।

अब आप HTML <button> टैग का उपयोग करके बटन बनाने के लिए एक विशेषज्ञ की तरह तैयार हैं!