(HTML) Input Tags and Attributes with Examples in Hindi

Rate this post

जब हम किसी भी वेबपेज में फॉर्म टैग से डाटा लेते है तो उसमे भिन्न-भिन्न इनपुट टैग्स का इस्तेमाल होता है।

फॉर्म के अंदर जानकारी के प्रकार के हिसाब से कोन सी इनपुट फील्ड्स(टाइप) आएगा उसका चयन होता है।

ब्राउजर से सर्वर को डाटा भेजने के लिए फॉर्म टैग हमें बहुत सारी सुविधाए प्रदान करता है, जिससे हमारा काम आसान हो सके।

Also Read: (HTML) Form Tag in Hindi

तो अब हम बारी बारी से इनपुट टाइप्स और उसके कुछ जरूरी ऐट्रब्यूट के बारें में समझेंगे।

<Input> टैग्स के प्रकार की सूची (Form Elements in Hindi )

  1. <input>
  2. <select> और <option>
  3. <textarea>
  4. <label>
  5. <button>
  6. <fieldset> और <legend>
  7. <progress>
  8. <datalist>

<input>

इस टैग को फॉर्म में सबसे ज्यादा इस्तेमाल किया जाना वाला टैग गिना जाता है, जिसमे सामान्य डाटा डाला जाता है, जैसे की नाम, नंबर, ईमेल, आदि।

इस टैग का इस्तेमाल करने के लिए आपको बस इसका कोई भी ऐट्रब्यूट डालना होता है, जैसे की फोन नंबर के लिए “tel” ऐट्रब्यूट।

<input> टैग के बारें में विस्तृत जानने के लिए नीचे दिया गया ब्लॉग जरूर पढे,

Also Read: (HTML) Attributes of Input Tag in Hindi

उदाहरण:

<input type"email" placeholder="ईमेल डाले" />

<select> और <option>

<select> टैग का इस्तेमाल करके हम यूजर को dropdown list(सूची) मे से ऑप्शन(विकल्प) चुनने की सुविधा प्रदान कर सकते है।

ये इनपुट टैग सामान्य तरीके से देश, राज्य, शहर, आदि जैसे इनपुट लेने के लिए इस्तेमाल होता है।

सिलेक्ट टैग के अंदर के विकल्प <option> टैग से दिखाए जाते है।

उदाहरण:

<select>
   <option>HTML</option>
   <option disabled>CSS</option>
   <option selected>JavaScript</option>
</select>

<option> टैग के selected ऐट्रब्यूट से हम किसी भी ऑप्शन को डिफ़ॉल्ट सिलेक्ट करा सकते है, और disabled ऐट्रब्यूट से किसी भी विकल्प को सिलेक्ट होने से रोक सकते है।

<textarea>

जब हमें कोई इस प्रकार का डाटा फॉर्म में लेना हो, जिसमे उसकी लिमिट(सीमा) हमें नहीं पता तो इस प्रकार के डाटा को लेने के <teaxtarea> इनपुट टैग का इस्तेमाल होता है, अड्रेस, कमेन्ट, रिपोर्ट सेक्शन आदि <textarea> के सर्वश्रेषठ उदाहरण है।

इस टैग की साइज़ को यूजर अपने हिसाब से बदल भी सकता है।

rows और cols ऐट्रब्यूट से हम textarea को डिफ़ॉल्ट साइज़ दे सकते है।

उदाहरण:

<textarea rows="5" cols="30">
   
</textarea>

<label>

ये टैग कोई इनपुट लेने के लिए नहीं बलके इनपुट टैग्स को सपोर्ट करने के लिए इस्तेमाल होता है।

इस टैग से हम किसी भी इनपुट फील्ड को नाम दे सकते है जैसे नीचे उदाहरण में दिखया है।

उदाहरण:

<label for="userEmail">ईमेल: </label>
<input type="email" id="userEmail" placeholder="hi@abhishekdeyroy.com"/>

अगर आप ऊपर के आउट्पुट में “ईमेल” पर क्लिक करेंगे तो automatically ईमेल के इनपुट में आप का कर्सर पहुँच जाएगा, क्यूंकी <label> टैग का for ऐट्रब्यूट और <input> टैग का id ऐट्रब्यूट एक दूसरे से जुड़े हुवे है।

<button>

HTML फॉर्म में कोई action कराने के लिए <button> टैग इस्तेमाल होता है।

अगर फॉर्म टैग में कोई बटन दिया गया है जिसको कोई टाइप नहीं दिया गया तो वो डिफ़ॉल्ट सबमिट बटन गिना जाता है।

बटन टैग को हम जरूरत के हिसाब से फॉर्म के बाहर भी इस्तेमाल कर सकते है।

उदाहरण:

<form>
   <input type="text" name="userName" placeholder="नाम" /> <br/> <br/>
   <input type="email" name="userEmail" placeholder="ईमेल" /> <br/> <br/>
   <button type="submit">Submit</button>
   <button type="reset">Reset</button> <br/> <br/>
</form>

जब हम फॉर्म को सबमिट करते है तो इनपुट का डाटा उसके name ऐट्रब्यूट को ध्यान में रख कर सर्वर की ओर लिया जाता है।

<fieldset> और <legend>

<fieldset> टैग इनपुट टैग्स का समूह बनाने के लिए इस्तेमाल होता है, और <legend> टैग से उस समूह का शीर्षक दे सकते है।

इस टैग में दिए गए इनपुट के समूह में एक खास बॉर्डर दिखती है।

उदाहरण:

<fieldset>
  <legend>Company Details:</legend>
  <label for="websiteUrl">Website Url:</label>
  <input type="url" id="websiteUrl" /> <br/>
  <label for="companyEmail">Email:</label>
  <input type="email" id="companyEmail" /> <br/><br/>
  <input type="submit" value="Submit">
 </fieldset>

Note: HTML फॉर्म में हम button और input टैग दोनों में type=”submit” या type=”reset” दे सकते है, जिससे दोनों में एक ही काम होगा।

<progress>

<progress> टैग का इस्तेमाल करके हम एक सामान्य प्रोसेस बार बना सकते है, जिससे यूजर को प्रोसेस कहा तक पहुंची है, उसका अंदाज आ सके।

इस टैग में max और value 2 महत्वपूर्ण ऐट्रब्यूट है।

उदाहरण:

<label for="submiting">Please wait</label> <br/>
<progress id="submiting" max="100" value="70">70%</progress>

Also Read:

हमें उम्मीद है की आपको हमारा ये ब्लॉग “HTML Input tags with Examples in Hindi” जरूर पसंद आया होगा, वेब डेवलपमेंट से संबंधित बहुत सारे ब्लॉग्स हिन्दी में हमारी इसी वेबसाईट में उपस्थित है जिसको आप फ्री में पढ़ कर अपना ज्ञान बढ़ा सकते है।

अगर आपकी कोई सलाह या सुझाव हो तो आप हमें कमेन्ट करके बता सकते है, धन्यवाद।


HTML CSS से संबंधित अक्सर पूछे जाने वाले प्रश्न

HTML में CSS क्या है?

कैस्केडिंग स्टाइल शीट्स (सीएसएस) एक स्टाइलशीट भाषा है जिसका उपयोग HTML या XML (SVG, MathML या XHTML जैसी XML बोलियों सहित) में लिखे गए दस्तावेज़ की प्रस्तुति का वर्णन करने के लिए किया जाता है।

HTML में CSS क्या है और इसके प्रकार?

चयनकर्ता सीएसएस पहचानकर्ता हैं जो निर्दिष्ट करते हैं कि पूरे वेब पेज पर कौन से HTML घटकों को सजाना है। सीएसएस तीन प्रकार के होते हैं: बाहरी, आंतरिक और इनलाइन । बाहरी सीएसएस कमांड मुख्य HTML पृष्ठ से एक अलग फ़ाइल में लिखे गए हैं। फिर इन्हें HTML फ़ाइल में एक कमांड द्वारा प्रत्येक वेब पेज से जोड़ा जाता है।

CSS क्या है इसका क्या महत्व है?

सीएसएस 3 क्या है ( Css3 kya hai in hindi )

दोस्तों आपको तो पता होगा की Html की मदद से एक पेज का सिर्फ शरीर त्यार किया जाता है उसमे जान डालने का काम css के द्वारा किया जाता है Css ki मदद से एक वेब पेज को Backround color, Imagesize, Font Size और बहुत सी tags को color देकर उसे और भी ज्यादा आकर्षक बनाया जाता है।

सीएसएस का मतलब क्या है?

CSS का फुल फॉर्म “Cascading Style Sheet” होता है. इसे हिंदी में “काश कार्डिंग स्टाइल शीट ” कहते हैं. यह एक वेब डिजाइनिंग लैंग्वेज होता है. इसे Hakon Winum Lie ने 1994 में बनाया था एवं इसे W3C द्वारा 1996 में विकसित किया गया था.

HTML में CSS कहां लगाते हैं?

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

1 thought on “(HTML) Input Tags and Attributes with Examples in Hindi”

Leave a Comment