HTML Input

HTML में <input> टैग बहुत महत्वपूर्ण होता है, खासकर जब आप किसी फॉर्म (form) में यूज़र से डेटा लेना चाहते हैं। इसमें कई attributes (गुण) होते हैं जो इसकी कार्यशैली को निर्धारित करते हैं। नीचे सभी ज़रूरी attributes को सरल हिंदी में समझाया गया है:

🔑 <input> टैग क्या करता है?

यह यूज़र से टेक्स्ट, ईमेल, पासवर्ड, तारीख, फाइल आदि इनपुट लेने के लिए प्रयोग होता है।

✅ सबसे ज़रूरी <input> Attributes:

1. type

👉 यह बताता है कि इनपुट कैसा होगा।

2. name

👉 सर्वर को यह इनपुट की पहचान बताता है (डेटा भेजने के समय काम आता है)। 📌 ज़रूरी होता है फॉर्म सबमिट करते समय।

<input type="text" name="username" />

3. value

👉 इनपुट का डिफ़ॉल्ट या वर्तमान मान।

<input type="text" value="Hello" />

4. placeholder

👉 यूज़र को निर्देश देता है कि क्या भरना है।

<input type="email" placeholder="अपना ईमेल लिखें" />

5. required

👉 अगर यह attribute लगा है तो इनपुट भरना अनिवार्य होगा।

<input type="text" required />

6. readonly

👉 इनपुट दिखेगा लेकिन यूज़र कुछ बदल नहीं पाएगा।

<input type="text" value="केवल पढ़ने योग्य" readonly />

7. disabled

👉 इनपुट बंद हो जाता है, यूज़र कोई इंटरैक्शन नहीं कर सकता।

<input type="text" disabled />

8. min और max

👉 number, date, या range में न्यूनतम और अधिकतम सीमा तय करने के लिए।

<input type="number" min="1" max="100" />
<input type="date" min="2024-01-01" max="2025-12-31" />

9. maxlength और minlength

👉 टेक्स्ट की अधिकतम और न्यूनतम लंबाई तय करने के लिए।

<input type="text" maxlength="10" minlength="3" />

10. pattern

👉 Regex pattern के अनुसार इनपुट वैलिड होना चाहिए।

<input type="text" pattern="[A-Za-z]{3,}" title="कम से कम 3 अक्षर" />

11. step

👉 number या range के लिए स्टेप्स तय करता है।

<input type="number" min="0" max="10" step="2" />

12. autocomplete

👉 ब्राउज़र ऑटो-सजेशन दिखाए या नहीं:

<input type="text" name="name" autocomplete="off" />

13. autofocus

👉 पेज लोड होने पर यह इनपुट अपने आप फोकस में आ जाता है।

<input type="text" autofocus />

14. multiple

👉 file या email में एक से अधिक वैल्यू चुनने की अनुमति देता है।

<input type="file" multiple /> <input type="email" multiple />

🔍 एक पूरा उदाहरण:

<form>
  <label>ईमेल:</label>
  <input
    type="email"
    name="user_email"
    placeholder="example@mail.com"
    required
    maxlength="30"
    autofocus
  />
  <br />
  <label>पासवर्ड:</label>
  <input type="password" name="user_pass" minlength="6" required />
  <br />
  <input type="submit" value="लॉग इन करें" />
</form>