HTML फ़ॉर्म तत्व
फ़ॉर्म attributes ने form टैग को ठीक किया। फ़ॉर्म तत्व उसके अंदर के टुकड़े हैं — लेबल, टेक्स्ट क्षेत्र, सूची, बटन, समूहीकरण। यह पाठ टूलकिट का नक्शा है। input प्रकार आगे।
फ़ॉर्म तत्व क्यों मायने रखते हैं
केवल attributes वाला खाली form उत्तर नहीं लेता। नियंत्रण चाहिए। textarea बनाम एक-पंक्ति input या select बनाम मुक्त पाठ उपयोग और डेटा बदलता है।
सीधा उत्तर
1) हर दृश्य नियंत्रण को label से जोड़ें। 2) input कई एक-पंक्ति नियंत्रणों के लिए। 3) textarea बहु-पंक्ति। 4) select+option निश्चित सूची। 5) button क्रिया। 6) fieldset+legend समूह। action/method बाहरी form पर।
📊 Common form pieces
| Element | Role | Beginner tip |
|---|---|---|
| label | Names a control for humans and assistive tech | Match for= to the control id |
| input | Single-line text, email, checks, radios, … | Types catalog is the next lesson |
| textarea | Multi-line text | Prefer over input for bios and messages |
| select / option | Choose from a fixed list | Each option needs a value |
| button | submit, reset, or generic action | Default in a form is often submit — set type explicitly |
| fieldset / legend | Group related controls with a title | legend is the accessible group name — not a plain div |
मिश्रित नियंत्रणों वाला प्रोफ़ाइल fieldset
छोटा प्रोफ़ाइल संपादक: एक समूह, बहु-पंक्ति bio, स्तर सूची, सेव बटन।
<form action="/profile" method="post">
<fieldset>
<legend>Profile</legend>
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="4"></textarea>
<label for="level">Level</label>
<select id="level" name="level">
<option value="beginner">Beginner</option>
<option value="middle">Middle</option>
<option value="advanced">Advanced</option>
</select>
<button type="submit">Save</button>
</fieldset>
</form>
प्रोफ़ाइल डेमो पढ़ें
- fieldset+legend समूह नाम देते हैं
- textarea bio के लिए बेहतर
- select/option स्तर सीमित करते हैं
- हर नियंत्रण में id और name
- submit फ़ॉर्म भेजता है
- action/method पिछले पाठ से
प्राथमिकताएँ: रेडियो और बटन प्रकार
कभी उत्तर अनन्य विकल्प होता है। रेडियो समान name बाँटते हैं। हर विकल्प पर label। submit को reset और button से तुलना करें।
<form action="/prefs" method="post">
<fieldset>
<legend>Theme</legend>
<label>
<input type="radio" name="theme" value="light" checked>
Light
</label>
<label>
<input type="radio" name="theme" value="dark">
Dark
</label>
</fieldset>
<button type="submit">Save prefs</button>
<button type="reset">Clear</button>
</form>
प्राथमिकता डेमो पढ़ें
- समान name वाले रेडियो एक समूह
- label में रेडियो टेक्स्ट क्लिक योग्य बनाता है
- legend Theme शीर्षक देता है
- submit भेजता है; reset साफ़ करता है — सेव नहीं
- अन्य input प्रकार आगे
सही नियंत्रण चुनें
- छोटा उत्तर/ईमेल/पासवर्ड: input
- लंबा पाठ: textarea
- निश्चित सूची: select या रेडियो
- अनुभाग समूह: fieldset+legend
- नाम: label
- भेजें: button type=submit
अभ्यास — तत्व जोड़ें
- प्रोफ़ाइल कॉपी करें; legend और option बदलें
- अस्थायी रूप से textarea को input से बदलें
- नोट्स के लिए दूसरा fieldset
- थीम रेडियो; label पर क्लिक
- Clear फिर Save
- एक नियंत्रण form के बाहर
- वाक्य: तत्व अंदर लेबल वाले नियंत्रण हैं; form टैग attributes अलग परत
आसान गलतियाँ
- बिना label नियंत्रण
- legend की जगह div शीर्षक
- submit/फ़ील्ड form के बाहर
- लंबे संदेश के लिए एक-पंक्ति input
- name भूलना
- reset को सर्वर सेव समझना
- सोचना यह पाठ action/method बदलता है
सार
- फ़ॉर्म तत्व form के अंदर नियंत्रण हैं
- label, input, textarea, select, button, fieldset/legend अधिकांश शुरुआती UI कवर करते हैं
- हमेशा लेबल करें; fieldset से समूह
- प्रश्न के अनुसार नियंत्रण
- फ़ॉर्म attributes और input प्रकार अलग परतें
- अगला: input प्रकार
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी