इनपुट टैग की मदद से हम फॉर्म में डेटा ले सकते है, ये टैग फॉर्म में सबसे ज्यादा इस्तेमाल होने वाला टैग है, इसमे “type” ऐट्रब्यूट की वैल्यू के हिसाब से इसका परिणाम आता है।
“HTML टैग की अतिरिक्त जानकारी देने के लिए ऐट्रब्यूट का इस्तेमाल होता है”
<input> टैग के सारे Attributes बारे में हम एक एक करे इस ब्लॉग में अच्छे से समझेंगे।
<input> टैग के ऐट्रब्यूट की सूची
type attribute
इस एट्रिब्यूट से हम इनपुट टैग के प्रकार को जैसे text, email, password, number इत्यादि निर्धारित कर सकते हैं। यह एट्रिब्यूट सबसे महत्वपूर्ण और व्यापक रूप से उपयोग किया जाता है।
इस एट्रिब्यूट के महत्व को ध्यान में रखते हुए हमने इस पर एक विस्तृत ब्लॉग पोस्ट लिखी जिसकी लिंक आपको नीचे दिख रही है।
name attribute
इस एट्रिब्यूट का उपयोग करके हम इनपुट टैग को एक अलग और पहचाने जाने वाला नाम दे सकते हैं।
यह खासकर फॉर्म सबमिट करते समय उपयोगी होता है, क्योंकि सर्वर पर स्टोर किए गए प्रोग्रामिंग स्क्रिप्ट इनपुट के नाम से ही उसकी पहचान करते हैं।
उदाहरण:
<input name="firstName" placeholder="Enter First Name"/> <br /><br /> <input name="lastName" placeholder="Enter Last Name"/>
value attribute
अगर हम इनपुट टैग को ये ऐट्रब्यूट नहीं भी देते है तो भी ब्राउजर डिफ़ॉल्ट इनपुट में इसको डाल ही देता है, लेकिन कही बार अगर हमें इनपुट को डिफ़ॉल्ट कोई वैल्यू देनी हो तो इसका इस्तेमाल अनिवार्य है।
उदाहरण:
<input type="text" value="W3Hindi" />
placeholder attribute
इस ऐट्रब्यूट का इस्तेमाल करके हम इनपुट टैग में निरदर्शन के लिए छवि प्रदान कर सकते है, जो की इनपुट की वैल्यू नहीं होती बलके सिर्फ पारदर्शिय dummy टेक्स्ट होता है।
उदाहरण:
<input type="text" placeholder="Enter Mobile" />
परिणाम:
required attribute
अगर किसी इनपुट फील्ड को अनिवार्य बनाना हो जिसमे बिना कोई वैल्यू डाले फॉर्म सबमिट ना हो सके, तो हम इस “required” ऐट्रब्यूट को इस्तेमाल कर सकते है।
उदाहरण:
<form> <input type="text" placeholder="First Name"/> <br/><br/> <input type="text" placeholder="Last Name"/> <br/><br/> <input type="email" placeholder="Enter Personal Email" required /> <br/><br/> <button type="submit">Submit</button><br/><br/> </form>
परिणाम:
ऊपर वाले फॉर्म अगर आप बिना “email” में वैल्यू डाले सबमिट करने का प्रयास करोगे तो अलर्ट देखने मिलेंगा क्यूंकी email में required attribute इस्तेमाल किया है।
readonly attribute
जब फॉर्म के इनपुट फील्ड में कोई वैल्यू डिफ़ॉल्ट दलवानी हो जो की यूजर चेंज ना कर पाए तो उसके लिए हम इस ऐट्रब्यूट का इस्तेमाल कर सकते है।
इस वैल्यू को यूजर चेंज नहीं कर सकता फिर भी ये वैल्यू फॉर्म के सबमिट के टाइम सर्वर पर जरूर जाती है।
उदाहरण:
<form> <lable>Email: </label> <input type="email" placeholder="Enter Company Email" /> <br /><br /> <lable>Country: </label> <input type="text" value="India" readonly/> <br /><br /> <button type="submit">Submit</button> <br/><br/> </form>
परिणाम:
disabled attribute
ये ऐट्रब्यूट readyonly ऐट्रब्यूट की ही तरह काम करता है मगर इसमे डाली गई वैल्यू सर्वर को नहीं भेजी जाती। जो की इसको readonly से अलग करता है।
readonly का उदाहरण और कोड हमने ऊपर देखा है।
autofocus attribute
अगर हम किसी इनपुट फील्ड में इस ऐट्रब्यूट का इस्तेमाल करते है तो वो फील्ड हाइलाइट हो कर दिखती है, और कर्सर ऑटोमैटिक वहा पहुँच जाता है।
उदाहरण:
<form> <input type="text" placeholder="Enter Name" autofocus/> <br/><br/> <input type="email" placeholder="Enter Email" /> <br/><br/> </form>
min/max attributes
इन ऐट्रब्यूट की सहायता से हम इनपुट की मिनिमम और मैक्समम वैल्यू की लिमिट रख सकते है।
ये ऐट्रब्यूट type=”number” के साथ ही सही से चलेगा।
अगर हम इनपुट में दी गई min/max के अनुसार वैल्यू नहीं डालते तो फॉर्म में एरर आएगी।
उदाहरण:
<input type="number" min="2" max="5" placeholder="Quantity">
परिणाम:
HTML में ऐट्रब्यूट क्या होता है उसके बारें में समझने के लिए आप नीचे दिया गया ब्लॉग पढ़ सकते है।
हमें आशा है की आपको हमारे ये ब्लॉग जरूर पसंद आया होगा, तो इसको अपने वेब डेवलपर फ़्रेंड्स के साथ शेयर करना ना भूले तो अगर आपकी कोई सलाह या सुझाव हो तो आप हमें कमेन्ट सेक्शन में बता सकते हो, धन्यवाद।
