HTML input boxes | फॉर्म text boxes फील्ड | Hindi

डाटा इनफार्मेशन (information) का कलेक्शन होता हैं जो की वेबसाइट बनाने में अहम् भूमिका निभाता हैं । इस tutorial में हम HTML form input fields या कह सकते हैं text boxes के बारे में सीखेंगे की किस तरह से टेक्स्ट बॉक्स को HTML पेज पर बनाया जाता हैं ।

HTML text box | Form text box | Hindi –

Text बॉक्स को input field भी कहा जा सकता हैं जिसके द्वारा यूजर से इनफार्मेशन ली जाती हैं । साधारण हिंदी भाषा में कहे तो जैसे हम किसी वेबसाइट पर जाते हैं ओर वहां पर contact करने के लिए एक फॉर्म (contact form) होता है जिसमे नाम , ईमेल आदि के लिए fields भी होते हैं उसके द्वारा वेबसाइट owner यूजर से details लेकर contact कर सकता हैं या अन्य login के लिए , रजिस्ट्रेशन (registration form) के लिए आदि के लिए भी input field यानी की text boxes का उपयोग किया जाता हैं ।

चलिए अलग अलग text box को जानते हैं ओर उनके उदाहरण से समझते हैं किस किस तरह फॉर्म में टेक्स्ट बॉक्स बनाये जाते हैं ।

HTML input type text | Text box

इस टेक्स्ट बॉक्स का उपयोग characters और number दोनों के लिए किया जा सकता हैं । इसमें हमे टाइप की वैल्यू text देनी होती हैं ।

निचे दिए उदाहरण से आप इस input box को आसानी से समझ जाओगे -

<!DOCTYPE html>
<html>
<head>
<title> HTML form field text box  </title>
</head>
<body>





<input type="text" name="name" value="Techno Smarter" required>

</body>
</html>

Output

name - name एक इनपुट टैग का attribute हैं जिसके द्वारा बॉक्स के नाम कोई डिफाइन किया जाता हैं। इसी नाम के द्वारा बॉक्स की वैल्यू को use भी किया जा सकता हैं। नाम कुछ भी ले सकते हैं अपने अनुसार।

value - वैल्यू के द्वारा इनपुट बॉक्स की वैल्यू को सेट किया जा सकता हैं।

required - या एक अन्य एट्रिब्यूट (attribute ) हैं जिसका उपयोग करने से इनपुट बॉक्स में वैल्यू खाली नहीं जाती हैं वैल्यू डालनी ही पड़ती हैं यह वेलिडेशन का काम भी करता हैं। जिसका मतलब हैं यह field (input box) mandatory (अनिवार्य ) हैं इसमें वैल्यू डालनी ही हैं वरना एक मैसेज दिखाए की या फील्ड required हैं इसमें वैल्यू इनपुट करे।

उपर दिए गए उदाहरण में आप देख सकते हैं की किस तरह से form के अंदर type (attribute type) text देने से एक text box या कह सकते हैं input box बन जाता हैं उसी के साथ हमने यहाँ पर उसका एक naam भी दिया हैं जिसके द्वारा उस टेक्स्ट बॉक्स को एक नाम से डिफाइन किया जाता हैं साधारण हिंदी भाषा में कहे तो यह एक नाम होता हैं जो की text box को प्रदर्शित करता हैं ।

Input type number | input बॉक्स | Number field

इस input box को हम जब उपयोग करते हैं जब हमें नंबर (digits ) के लिए टेक्स्ट बॉक्स बनाना हो इसमें हम केवल नंबर ही enter कर सकते हैं क्युकी यह केवल नंबर ही सपोर्ट करता हैं इसमें हम कोई भी character नही लिख सकते हैं । इस नंबर input बॉक्स को हम नंबर के लिए जैसे – फ़ोन नंबर , pincode आदि जिसमे हमे केवल नंबर ही चाहिए होते हैं यूजर से ।

चलिए उदाहरण से समझते हैं की type number को या कह सकते हैं नंबर input बॉक्स को HTML में कैसे बनाये –

<!DOCTYPE html>
<html>
<head>
<title> HTML number input box </title>
</head>
<body>





<input type="number" name="pincode" value="123456">

</body>
</html>

Output

उपर दिए गए उदाहरण में हमने number ओर characters के लिए सिर्फ टेक्स्ट दिया था परन्तु यदि हमें सिर्फ नंबर के लिए input box बनाना हैं तो हम वहां पर type की value number दे देते हैं ।

उपर दिए गए उदाहरण में हमने type की वैल्यू को नंबर दिया हैं जिसके कारन एक वेलिडेशन लग जाता हैं की यूजर इस input बॉक्स या कह सकते हैं input फील्ड में केवल नंबर (डिजिट ) ही enter कर सकता हैं तो यह काफी फायदा रहता है यदि आपको सिर्फ नंबर के लिए input बॉक्स बनाना होता हैं ।

input type email | Email input box

input type email या email inout box से आप समझ सकते हैं यह टinput बॉक्स किस लिए उपयोग किया जाता हैं । यहi nput बॉक्स ईमेल के लिए उपयोग किया जाता हैं क्युकी इसमें email के लिए एक वेलिडेशन (validation) लग जाती हैं की जिस से यूजर को email id ही डालनी होती हैं ।

यदि आपको ईमेल के लिए कोई टेक्स्ट बॉक्स या कह सकते हैं ईमेल input बॉक्स बनाना हैं तो आपको type की वैल्यू को ईमेल देना पड़ता हैं ।

<!DOCTYPE html>
<html>
<head>
<title> HTML email box | form email input box   </title>
</head>
<body>


<input type="email" name="email" value="myuser@example.com" >

</body>
</html>

Output

उपर दिए गए उदाहरण में हमने type की वैल्यू email दी हैं जिससे यूजर को उसमे ईमेल डालना ही होता हैं क्युकी उसमे ईमेल की वेलिडेशन लग जाती हैं जिस से टेक्स्ट बॉक्स यह valid करता हैं की इस टेक्स्ट बॉक्स में केवल ईमेल आईडी ही enter हो ।

जैसे – myuser@example.com

Input type password | password input बॉक्स –

HTML फॉर्म में password input बॉक्स एक अहम् भूमिक निभाता हैं यदि हम कोई login , या रजिस्ट्रेशन के लिए कोई फॉर्म बना रहे हैं तो । यह भी एक तरह का टेक्स्ट बॉक्स होता हैं जिसके enter की गयी वैल्यू चाहे वो नंबर हो या character तुरंत स्टार (*******) के रूप में दिखाई देती हैं ।

साधारण हिंदी भाषा में कहे तो आपने facebook या google में लॉग इन तो किया ही होगा वहां पर जब आप ईमेल के बाद password डालते हैं तो वह password स्टार के रूप में दिखाई देता हैं । उस तरह का input बॉक्स type password के द्वारा बनाया जाता हैं जिसे ख़ास दुसरो की नजरो से password या कहे को अमूल्य डाटा को लिखने के लिए जैसे – pin number , password आदि के लिए उपयोग किया जाता हैं ।

<!DOCTYPE html>
<html>
<head>
<title> HTML password input box   </title>
</head>
<body>


<input type="password" name="mypass" value="admin@123" >

</body>
</html>

Output

उपर दिए गए उदाहरण से आप समझ सकते हैं किस तरह से password के लिए input बॉक्स बनाते हैं यहाँ पर हमने सिर्फ type password दिया है।

Input type date | date सिलेक्शन | Date picker

नाम से ही पता चल रहा हैं की यह input बॉक्स date के लिए उपयोग होता हैं परन्तु यह उपर दिए गए input बॉक्स या कह सकते हैं उपर दिए गए text boxes से बिलकुल अलग होता हैं जिसमे date को input नही किया जाता बल्कि date को सेलेक्ट (select) किया जाता हैं । Type date देने से एक date सिलेक्टर (selector) बन जाता हैं जिपर क्लिक करने पर date जैसे – year, month, day को select करके date को सेट कर दिया जाता हैं इसमें कोई भी वैल्यू enter करने की जरूर नही होती हैं बस date को select किया जाता है।

निचे दिए गए उदाहरण से आप date input बॉक्स या कह सकते हैं date selector (picker) को समझ जाओगे ।

<!DOCTYPE html>
<html>
<head>
<title> HTML date box | Date picker  </title>
</head>
<body>


<input type="date" name="my_date" value="2021-06-24">

</body>
</html>

Output

उपर दिए गए उदाहरण में app देख सकते हैं किस तरह से type date देकर date selector का उपयोगे किया जाता हैं ।

Input type file | file browse box

यह एक अन्य प्रकार का बॉक्स होता हैं जिसे फाइल input बॉक्स या फाइल browse box कहा जा सकता हैं ।

इस box के द्वारा फाइल को choose करके browse किया जाता हैं जिस से वह server पर अपलोड भी की जाती हैं ।

साधरण हिंदी भाषा में समझे तो जैसे आपने facebook पर कोई इमेज अपलोड की हो तो वहां पर एक ब्राउज बॉक्स मिलता हैं जिसपर क्लिक करने पर वह एक फाइल को choose करने को कहता हैं जो भी फाइल आपको अपलोड करने हैं कर सकते हैं ।

फाइल से यहाँ मतलब हैं जैसे – इमेज ,पीडीऍफ़ फाइल , टेक्स्ट फाइल , ज़िप फाइल , docx फाइल आदि इसी तरह की सभी फाइल को आसानी से अपलोड करने के लिए input type फाइल या फाइल browse box का उपयोग किया जाता हैं ।

<!DOCTYPE html>
<html>
<head>
<title> HTML type file | file browse box   </title>
</head>
<body>



</body>
</html>

Output

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

इस तरह से input boxes को HTML पेज पर form के अंदर बनाया जाता हैं ।

Please Share