HTML इनपुट विशेषताएँ
इनपुट प्रकारों ने type से चेहरा चुना। इनपुट विशेषताएँ उसी टैग पर व्यवहार सुधारती हैं: संकेत, आवश्यक, सीमा, लंबाई, पैटर्न, लॉक। यह दैनिक सहायक कैटलॉग है — दूसरा type मानचित्र नहीं, और अगला form= ट्रिक नहीं।
इनपुट विशेषताएँ क्यों मायने रखती हैं
सही type भी खाली आवश्यक फ़ील्ड, सीमा से बाहर आयु, लंबे कोड छोड़ता है। विशेषताएँ हल्की ब्राउज़र जाँच जोड़ती हैं। असली ऐप में सर्वर पर भी जाँचें।
सीधा उत्तर
1) name, id, value रखें। 2) placeholder संकेत है — label का विकल्प नहीं। 3) आवश्यक के लिए required। 4) संख्या/तारीख पर min/max/step; पाठ पर maxlength; कभी pattern। 5) readonly दिखता है और अक्सर सबमिट होता है; disabled रोकता है और अक्सर नहीं भेजता। 6) विशेषताएँ type सुधारती हैं — बदलती नहीं; form= से अलग।
📊 Handy input attributes
| Attribute | Role | Beginner tip |
|---|---|---|
| placeholder | Hint text in an empty field | Not a label — always keep a real label |
| required | Must be filled before submit | Browser may block empty submit |
| min / max / step | Limits for number/date-like types | Match the type you already chose |
| maxlength | Max characters for text-like types | Soft cap in the UI; still check on the server |
| pattern | Allowed character pattern | Keep patterns simple for beginners |
| disabled | Not usable; usually not submitted | Do not disable fields you still need to send |
| readonly | Visible, not editable; still submitted | Good for fixed display values |
प्रोफ़ाइल: आवश्यक, संकेत, लंबाई
छोटा फ़ॉर्म: नाम required+placeholder, उपयोगकर्ता maxlength/pattern, वैकल्पिक शहर।
<form action="/profile" method="post">
<label for="fullname">Full name</label>
<input id="fullname" name="fullname" type="text"
placeholder="Ada Lovelace" required>
<label for="user">Username</label>
<input id="user" name="user" type="text"
maxlength="12" pattern="[A-Za-z0-9_]+"
placeholder="ada_lovelace" required>
<label for="city">City</label>
<input id="city" name="city" type="text"
placeholder="Optional">
<button type="submit">Save</button>
</form>
प्रोफ़ाइल डेमो पढ़ें
- नाम और उपयोगकर्ता पर required
- placeholder केवल खाली पर — नाम label से
- maxlength=12
- pattern अक्षर/अंक/_
- शहर बिना required
- type=text पहले से; विशेषताएँ सुधारती हैं
बुकिंग: सीमाएँ और लॉक
संख्या/तारीख min/max/step से अर्थ पाती हैं। readonly कोड दिखता/अक्सर भेजता है; disabled प्रोमो अक्सर नहीं।
<form action="/book" method="post">
<label for="guests">Guests</label>
<input id="guests" name="guests" type="number"
min="1" max="8" step="1" value="2" required>
<label for="night">Night</label>
<input id="night" name="night" type="date"
min="2026-10-01" max="2026-12-31" required>
<label for="code">Booking code</label>
<input id="code" name="code" type="text"
value="BK-1042" readonly>
<label for="promo">Promo (staff only)</label>
<input id="promo" name="promo" type="text"
value="STAFF" disabled>
<button type="submit">Book</button>
</form>
बुकिंग डेमो पढ़ें
- मेहमान और रात पर min/max/step
- value=2 प्रारंभिक
- readonly कोड रखता/अक्सर भेजता
- disabled संपादन और अक्सर सबमिट रोकता
- तारीख सीमा type=date के साथ
- अगला: form=id से जुड़ाव
सही सहायक चुनें
- भरना ज़रूरी: required
- खाली संकेत: placeholder (+ label)
- संख्या/तारीख सीमा: min max step
- वर्ण सीमा: maxlength
- सरल प्रारूप: pattern
- दिखे, न बदले, भेजे: readonly
- लॉक, अक्सर न भेजे: disabled
- वायरिंग: name id value
- यहाँ type दोबारा न चुनें
अभ्यास — विशेषताओं से कसें
- प्रोफ़ाइल; required हटाएँ फिर लौटाएँ
- placeholder खाली; label रखें
- maxlength 20
- मेहमान min/max से बाहर
- कोड पर readonly बदलें
- सबमिट तुलना: कोड बनाम प्रोमो
- वाक्य: विशेषताएँ व्यवहार सुधारती हैं; type ने चेहरा चुना
आसान गलतियाँ
- label की जगह placeholder
- ज़रूरी सबमिट फ़ील्ड disable
- केवल ब्राउज़र पर भरोसा
- अनदेखे types पर min/max
- जटिल pattern
- type कैटलॉग से उलझन
- जल्दी form= पर कूदना
सार
- type के बाद विशेषताएँ व्यवहार सुधारती हैं
- रोज़: required, placeholder, सीमाएँ, maxlength, pattern
- readonly अक्सर सबमिट; disabled नहीं
- placeholder संकेत; label नाम
- name/id/value रखें
- अगला: इनपुट form विशेषताएँ
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी