HTML इनपुट: चरण-दर-चरण गाइड

<form> ... फॉर्म एलिमेंट ... </form>

`` टैग के अंदर वह जगह है जहां फॉर्म के अंदर के एलिमेंट संग्रहीत होते हैं। फॉर्म एलिमेंट में टेक्स्ट फील्ड, सबमिट बटन, रेडियो बटन, मल्टीलाइन टेक्स्ट बॉक्स, और HTML में स्वीकृत अन्य प्रकार के इनपुट डेटा शामिल हो सकते हैं।

HTML इनपुट

`` एलिमेंट एक फॉर्म फील्ड को परिभाषित करता है जिसमें विज़िटर डेटा सबमिट कर सकता है। `` डेट पिकर, चेकबॉक्स, बटन, और फ़ाइल अपलोडर जैसे फील्ड का समर्थन करता है।

`` एलिमेंट का सिंटैक्स इस प्रकार है:

<input type="inputType">

`` एलिमेंट कई एट्रिब्यूट स्वीकार करता है, लेकिन मुख्य एट्रिब्यूट जिसे आपको निर्दिष्ट करना होगा वह है type एट्रिब्यूट। यदि आप type एट्रिब्यूट निर्दिष्ट नहीं करते हैं, तो `` एलिमेंट वेब पेज पर दिखाई नहीं देगा। ऐसा इसलिए है क्योंकि `` एलिमेंट डिफ़ॉल्ट रूप से खाली होता है।

आइए कुछ उदाहरणों के माध्यम से देखें कि HTML `` टैग कैसे काम करता है।

हमें एक स्थानीय सैंडविच और सलाद स्टोर, Sue's Salads के लिए एक फॉर्म बनाने के लिए कहा गया है। यह फॉर्म ग्राहकों को स्टोर में उनके अनुभव के आधार पर फीडबैक सबमिट करने की अनुमति देना चाहिए। हमें जो फॉर्म बनाने के लिए कहा गया है वह स्वीकार करना चाहिए:

• ग्राहक का नाम (टेक्स्ट के रूप में)
• यह इंगित करने के लिए एक चेकबॉक्स कि क्या ग्राहक स्टोर के लॉयल्टी प्रोग्राम का सब्सक्राइबर है (एक चेकबॉक्स)
• ग्राहक के स्टोर में अनुभव के आधार पर 1-5 रेटिंग (एक नंबर के रूप में)

HTML इनपुट प्रकार

`` टैग इनपुट प्रकार की एक श्रृंखला स्वीकार करता है। एक इनपुट प्रकार "type" एट्रिब्यूट का उपयोग करके निर्दिष्ट किया जाता है। सामान्य इनपुट प्रकार में बटन, डेट पिकर, पासवर्ड फील्ड, और टेक्स्ट फील्ड शामिल हैं।

यहाँ `` टैग के साथ उपयोग किए जाने वाले सामान्य फॉर्म कंट्रोल इनपुट प्रकार की एक संक्षिप्त सूची है:

• button
• file
• checkbox
• password
• number
• radio
• submit
• text (टेक्स्ट इनपुट प्रकार)
• url
• date (डेट और टाइम पिकर)
• image
• email (ईमेल एड्रेस इनपुट कंट्रोल)

इनपुट प्रकार HTML उदाहरण

आइए HTML `` टैग का उपयोग करके कुछ फॉर्म फील्ड बनाएं।

टेक्स्ट फील्ड

`` एलिमेंट का उपयोग HTML में टेक्स्ट फील्ड बनाने के लिए किया जाता है। मान लीजिए हम एक टेक्स्ट फील्ड बनाना चाहते हैं जो ग्राहक से उनका नाम पूछता है। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:

<input type="text" placeholder="What is your name?">

हमारे कोड में, हमने दो एट्रिब्यूट के साथ एक टेक्स्ट फील्ड बनाया है। type एट्रिब्यूट को टेक्स्ट पर सेट किया गया है, जिसका अर्थ है कि हमारा फॉर्म टेक्स्ट इनपुट स्वीकार कर सकता है। placeholder एट्रिब्यूट को मान What is your name? असाइन किया गया है।

यह टेक्स्ट एक प्लेसहोल्डर मान के रूप में तब तक दिखाई देगा जब तक उपयोगकर्ता फील्ड में टेक्स्ट टाइप करना शुरू नहीं करता।

हमारा कोड लौटाता है:

<input type="text" placeholder="What is your name?">

जैसा कि आप देख सकते हैं, हमने प्लेसहोल्डर मान What is your name? के साथ एक टेक्स्ट फील्ड बनाया है।

चेकबॉक्स

HTML में, चेकबॉक्स को चेकबॉक्स प्रकार के इनपुट के रूप में मार्कअप किया जाता है:

<input type="checkbox" id="loyalty" name="loyalty" value="Yes">  <label for="loyalty">Are you a subscriber to our loyalty program?</label>

यह कोड एक चेकबॉक्स बटन बनाता है जो टेक्स्ट "Yes" प्रदर्शित करता है। यदि चेकबॉक्स पर क्लिक किया जाता है, तो यह हाइलाइट हो जाएगा।

हमारे चेकबॉक्स का लेबल "Are you a subscriber to our loyalty program?" है। यदि आप लेबल पर क्लिक करते हैं, तो चेकबॉक्स टॉगल हो जाता है। लेबल इनपुट प्रकार एक्सेसिबिलिटी के लिए आवश्यक है क्योंकि यह सुनिश्चित करता है कि रीडर आसानी से फॉर्म की सामग्री के बारे में पता लगा सके।

HTML लेबल के बारे में अधिक जानने के लिए, HTML `` टैग पर हमारा गाइड पढ़ें।

चेकबॉक्स से कई एट्रिब्यूट जुड़े होते हैं।

• Type एट्रिब्यूट। इनपुट प्रकार को चेकबॉक्स पर सेट करने की आवश्यकता है।
• ID। याद रखें ID के साथ वे आपकी फ़ाइल के लिए अद्वितीय होने चाहिए।
• Name और value। नाम और मान असाइन करना उपयोगी होता है ताकि फॉर्म सबमिट होने के बाद एकत्र किए गए डेटा को डील किया जा सके।
• Checked। चेक्ड एट्रिब्यूट, क्योंकि यह किसी चीज़ को असाइन नहीं किया गया है, बूलियन एट्रिब्यूट के रूप में जाना जाता है। चेक्ड होने का मतलब है कि यह स्वचालित रूप से ट्रू पर सेट है। डिफ़ॉल्ट फाल्स है, इसलिए आपको इसे केवल तभी सेट करना होगा यदि आप चाहते हैं कि चेकबॉक्स चेक्ड हो।

रेडियो बटन

`` एलिमेंट का उपयोग HTML में रेडियो बटन बनाने के लिए किया जाता है।

"रेडियो बटन" शब्द कार उद्योग से आया है, अजीब तरह से। कार स्टीरियो में भौतिक बटन होते थे जहां केवल एक बटन को एक समय में दबाया जा सकता था। यदि आप किसी अन्य चयन को दबाते, तो पिछला बटन डिसिलेक्ट हो जाता।

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

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

मान लीजिए हम एक फील्ड बनाना चाहते हैं जो पूछता है कि क्या उपयोगकर्ता Sue's Salads के कस्टमर लॉयल्टी प्रोग्राम का सब्सक्राइबर है। हम इस फील्ड को निम्न कोड का उपयोग करके बना सकते हैं:

<label for="yes">Yes</label> <input type="radio" value="yes" id="yes" /> <label for="no">No</label> <input type="radio" value="no" id="no" />

हमारा कोड लौटाता है:

<label for="yes">Yes</label> <input type="radio" value="yes" id="yes"> <label for="no">No</label> <input type="radio" value="no" id="no">

हमारे कोड में, हमने दो रेडियो बटन बनाए। पहला रेडियो बटन लेबल Yes को असाइन किया गया है और इसका मान yes है। हमारा दूसरा रेडियो बटन लेबल No को असाइन किया गया है और इसका मान no है।

नंबर फील्ड

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

मान लीजिए हम एक फॉर्म बनाना चाहते थे जो Sue's Salads के ग्राहक से स्टोर में उनके अनुभव को रेट करने के लिए कहता है। ग्राहकों को 1 और 5 के बीच एक न्यूमेरिक ग्रेड देना चाहिए। हम निम्न कोड का उपयोग करके इस डेटा को एकत्र करने वाला एक वेब फॉर्म बना सकते हैं:

<label>How positive was your experience at Sue's Salads (between 1 and 5)?</label> <input type="number" min="1" max="5" />

हमारा कोड लौटाता है:

<label>How positive was your experience at Sue's Salads (between 1 and 5)?</label> <input type="number" min="1" max="5">

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

इसके अलावा, क्योंकि इस फॉर्म फील्ड का नंबर प्रकार है, बॉक्स के अंदर दो छोटे तीर दिखाई देते हैं। जब ऊपर का तीर क्लिक किया जाता है, तो हमारे फील्ड का मान 1 से बढ़ जाएगा। यदि नीचे का तीर क्लिक किया जाता है, तो हमारे फील्ड का मान 1 से घट जाएगा।

निष्कर्ष

HTML `` टैग का उपयोग फॉर्म में उपयोगकर्ता इनपुट स्वीकार करने के लिए किया जाता है। `` टैग का उपयोग न्यूमेरिक मान, टेक्स्ट, डेट, हां/नहीं प्रतिक्रियाएं, और अन्य प्रकार के डेटा स्वीकार करने के लिए किया जा सकता है।

इस ट्यूटोरियल ने उदाहरणों के संदर्भ में चर्चा की कि HTML `` टैग का उपयोग कैसे करें, और `` टैग के साथ उपयोग के लिए उपलब्ध एट्रिब्यूट। अब आप `` टैग का उपयोग करके फॉर्म फील्ड एलिमेंट बनाने के लिए HTML प्रो की तरह तैयार हैं!

यदि आप HTML के बारे में अधिक जानना चाहते हैं, तो HTML सीखने पर हमारा पूर्ण गाइड देखें।