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

 ... फॉर्म एलिमेंट्स ...

एचटीएमएल इनपुट

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

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

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

<इनपुट> तत्व का सिंटैक्स इस प्रकार है:

<इनपुट टाइप="इनपुट टाइप">

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

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

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

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

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

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

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

• बटन
• फ़ाइल
• चेकबॉक्स
• पासवर्ड
• संख्या
• रेडियो
• सबमिट करें
• पाठ्यवस्तु (पाठ्य इनपुट प्रकार)
• यूआरएल
• तारीख (तारीख और समय चुनने वाला)
• छवि
• ईमेल (ईमेल पता इनपुट नियंत्रण)

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

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

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

HTML में टेक्स्ट फ़ील्ड बनाने के लिए <इनपुट प्रकार ="टेक्स्ट"> तत्व का उपयोग किया जाता है। मान लीजिए कि हम एक टेक्स्ट फ़ील्ड बनाना चाहते हैं जो ग्राहक से उनका नाम पूछे। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

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

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

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

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

चेकबॉक्स

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

<इनपुट प्रकार="चेकबॉक्स" आईडी="लोयल्टी" नाम="लॉयल्टी" मान="हां"> <लेबल के लिए="लॉयल्टी">क्या आप हमारे लॉयल्टी कार्यक्रम के सदस्य हैं?

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

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

HTML लेबल के बारे में अधिक जानने के लिए, HTML <लेबल> टैग पर हमारी मार्गदर्शिका पढ़ें।

चेकबॉक्स में उनके साथ कई विशेषताएँ जुड़ी होती हैं।

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

रेडियो बटन

HTML में रेडियो बटन बनाने के लिए <इनपुट प्रकार ="रेडियो"> तत्व का उपयोग किया जाता है।

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

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

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

मान लें कि हम एक ऐसा क्षेत्र बनाना चाहते हैं जो यह पूछे कि क्या उपयोगकर्ता सू के सलाद के ग्राहक वफादारी कार्यक्रम का ग्राहक है। हम इस कोड का उपयोग करके फ़ील्ड बना सकते हैं:

<लेबल के लिए="हां">हां<इनपुट प्रकार="रेडियो" मान="हां" आईडी="हां" /><लेबल के लिए="नहीं">नहीं<इनपुट टाइप ="रेडियो" मान ="नहीं" आईडी ="नहीं" /> 

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

<लेबल के लिए="हां">हां<इनपुट प्रकार="रेडियो" मूल्य="हां" आईडी="हां"><लेबल के लिए="नहीं">नहीं<इनपुट प्रकार ="रेडियो" मान ="नहीं" आईडी ="नहीं"> 

 हमारे कोड में, हमने दो रेडियो बटन बनाए। पहले रेडियो बटन को हां लेबल दिया गया है और इसका मान हां है। हमारे दूसरे रेडियो बटन को लेबल नंबर दिया गया है और इसका मान नंबर है।
 
संख्या फ़ील्ड
 

 <इनपुट प्रकार ="नंबर"> तत्व का उपयोग संख्यात्मक इनपुट को एक रूप में स्वीकार करने के लिए किया जाता है।
 

 मान लीजिए कि हम एक ऐसा फॉर्म बनाना चाहते हैं जो सू के सलाद के ग्राहक को स्टोर में अपने अनुभव को रेट करने के लिए कहे। ग्राहकों को 1 और 5 के बीच एक संख्यात्मक ग्रेड देना चाहिए। हम एक वेब फॉर्म बना सकते हैं जो निम्नलिखित कोड का उपयोग करके इस डेटा को एकत्र करता है:
 
सू के सलाद (1 और 5 के बीच) में आपका अनुभव कितना सकारात्मक रहा?
 

 हमारा कोड लौटाता है:
 
सू के सलाद (1 और 5 के बीच) में आपका अनुभव कितना सकारात्मक रहा?
 

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

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

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

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

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