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

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

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

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

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

एचटीएमएल फॉर्म रिफ्रेशर

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

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

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

 <फॉर्म> नाम:<इनपुट प्रकार ="टेक्स्ट">

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

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

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

एचटीएमएल बटन

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

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

यहां HTML का एक उदाहरण दिया गया है <button> कार्रवाई में टैग:

वेब पेज पर हमारा बटन इस तरह दिखाई देता है:

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

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

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

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

ऑटोफोकस

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

अक्षम

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

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

फ़ॉर्म

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

form विशेषता ने हमारे बटन को आईडी मान pizza . के साथ फ़ॉर्म से लिंक कर दिया है . इसलिए, जब हम अपने बटन पर क्लिक करते हैं, तो आईडी के साथ हमारा फॉर्म pizza प्रस्तुत किया जाएगा।

फॉर्मेशन

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

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

फॉर्मेंक्टाइप

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

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

फ़ॉर्मविधि

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

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

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

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

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

यहां formnovalidate का एक उदाहरण दिया गया है कार्रवाई में:

प्रारूप लक्ष्य

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

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

आदेश सबमिट करें

नाम

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

टाइप करें

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

मान

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

निष्कर्ष

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

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

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