HTML इनपुट प्रकार
फ़ॉर्म तत्वों ने form के अंदर टैग मैप किए। इनपुट प्रकार एक टैग पर ज़ूम करते हैं: input। type नियंत्रण का चेहरा चुनता है। यह पाठ type कैटलॉग है। required जैसे सहायक आगे।
इनपुट प्रकार क्यों मायने रखते हैं
type=text लगभग सबके लिए चलता है, पर फ़ोन गलत कीबोर्ड दिखाता है, पासवर्ड दिखते रहते हैं, तारीखें मुक्त टेक्स्ट बन जाती हैं। डेटा से type मिलाना टाइपिंग, जाँच और मानों का आकार सुधारता है।
सीधा उत्तर
1) input पर type लगाएँ — text, email, password, number, checkbox, radio, date, file, hidden, submit। 2) हर दृश्य को label से जोड़ें। 3) एक उत्तर वाले रेडियो समान name साझा करें; checkbox स्वतंत्र। 4) भेजने के लिए button type=submit प्राथमिक। 5) type केवल चेहरा चुनता है — action/method और बाद के attributes अलग परतें हैं।
📊 Starter input types
| type | Use | Beginner tip |
|---|---|---|
| text | General single-line text | Default when nothing fitter exists |
| Email addresses | Mobile email keyboard + light format check | |
| password | Masked secrets | Never store the real password in page source |
| number | Numeric values | Good for ages/qty — still validate on the server |
| checkbox | Independent on/off | Many can be checked at once |
| radio | One choice in a named group | Same name = one group |
| date | Calendar date | Browser UI varies; value is YYYY-MM-DD style |
| file | Upload a file | Needs multipart form encoding for real uploads |
| hidden | Value not shown | Still submitted with name/value |
साइनअप: टाइप किए फ़ील्ड
छोटा जॉइन फ़ॉर्म: ईमेल, पासवर्ड, age number, आरंभ तिथि।
<form action="/join" method="post">
<label for="mail">Email</label>
<input id="mail" name="mail" type="email">
<label for="pw">Password</label>
<input id="pw" name="pw" type="password">
<label for="age">Age</label>
<input id="age" name="age" type="number">
<label for="start">Start date</label>
<input id="start" name="start" type="date">
<button type="submit">Join</button>
</form>
साइनअप डेमो पढ़ना
- email → ईमेल UI
- password अक्षर छिपाता है
- number संख्यात्मक
- date तिथि नियंत्रण
- label for/id; name कुंजी
- action/method वही
सर्वे: checkbox, radio और file
टॉगल और अपलोड एक ही input अलग type से। रेडियो name=plan साझा करते हैं। checkbox अकेला। file पिकर खोलता है।
<form action="/survey" method="post" enctype="multipart/form-data">
<label>
<input type="checkbox" name="news" value="yes">
Newsletter
</label>
<fieldset>
<legend>Plan</legend>
<label>
<input type="radio" name="plan" value="free" checked>
Free
</label>
<label>
<input type="radio" name="plan" value="pro">
Pro
</label>
</fieldset>
<label for="resume">Resume</label>
<input id="resume" name="resume" type="file">
<button type="submit">Send</button>
</form>
सर्वे डेमो पढ़ना
- न्यूज़लेटर checkbox स्वतंत्र
- समान name → एक रेडियो विकल्प
- label टेक्स्ट क्लिक योग्य
- file + multipart अपलोड के लिए
- fieldset Plan फ्रेम — फोकस type
- अगला पाठ: required जैसे attributes
सही type चुनना
- छोटा पाठ: text
- ईमेल/पासवर्ड: email/password
- संख्या/उम्र: number
- विशेष विकल्प: radio समान name
- स्वतंत्र टॉगल: checkbox
- कैलेंडर दिन: date
- अटैचमेंट: file
- छिपा: hidden
- बहु-पंक्ति अभी भी textarea
अभ्यास — type बदलें
- साइनअप कॉपी; email→text
- password थोड़ी देर text
- मात्रा के लिए दूसरा number
- अलग name वाले रेडियो, फिर ठीक करें
- Newsletter + Pro; अपेक्षित name लिखें
- बिना multipart file — जागरूकता
- वाक्य: type इनपुट का चेहरा चुनता है
आसान गलतियाँ
- पासवर्ड के लिए text
- अलग name वाले रेडियो
- बिना label
- बिना encoding file अपलोड की उम्मीद
- type को action/name का विकल्प समझना
- लंबे पाठ के लिए textarea की जगह input
- अगले attributes पाठ से उलझना
सार
- एक input — type से कई चेहरे
- डेटा से type मिलाएँ
- रेडियो समान name; checkbox अकेला
- दृश्य को हमेशा label दें
- फ़ॉर्म तत्व और इनपुट attributes अलग परतें
- अगला: इनपुट attributes
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी