जब हम किसी भी वेबपेज में फॉर्म टैग से डाटा लेते है तो उसमे भिन्न-भिन्न इनपुट टैग्स का इस्तेमाल होता है।
फॉर्म के अंदर जानकारी के प्रकार के हिसाब से कोन सी इनपुट फील्ड्स(टाइप) आएगा उसका चयन होता है।
ब्राउजर से सर्वर को डाटा भेजने के लिए फॉर्म टैग हमें बहुत सारी सुविधाए प्रदान करता है, जिससे हमारा काम आसान हो सके।
तो अब हम बारी बारी से इनपुट टाइप्स और उसके कुछ जरूरी ऐट्रब्यूट के बारें में समझेंगे।
<Input> टैग्स के प्रकार की सूची (Form Elements in Hindi )
- <input>
- <select> और <option>
- <textarea>
- <label>
- <button>
- <fieldset> और <legend>
- <progress>
- <datalist>
<input>
इस टैग को फॉर्म में सबसे ज्यादा इस्तेमाल किया जाना वाला टैग गिना जाता है, जिसमे सामान्य डाटा डाला जाता है, जैसे की नाम, नंबर, ईमेल, आदि।
इस टैग का इस्तेमाल करने के लिए आपको बस इसका कोई भी ऐट्रब्यूट डालना होता है, जैसे की फोन नंबर के लिए “tel” ऐट्रब्यूट।
<input> टैग के बारें में विस्तृत जानने के लिए नीचे दिया गया ब्लॉग जरूर पढे,
उदाहरण:
<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="john@xyz.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>
हमें उम्मीद है की आपको हमारा ये ब्लॉग “HTML Input tags with Examples in Hindi” जरूर पसंद आया होगा, वेब डेवलपमेंट से संबंधित बहुत सारे ब्लॉग्स हिन्दी में हमारी इसी वेबसाईट में उपस्थित है जिसको आप फ्री में पढ़ कर अपना ज्ञान बढ़ा सकते है।
अगर आपकी कोई सलाह या सुझाव हो तो आप हमें कमेन्ट करके बता सकते है, धन्यवाद।
