HTML Textarea
पिछले पाठ ने form="id" और form* से स्वामित्व व सबमिट रूटिंग समझाई। textarea अलग काम है: टिप्पणियों और नोट्स के लिए बहुपंक्ति नियंत्रण। एकल-पंक्ति input पैराग्राफ के लिए कमज़ोर है। जब उपयोगकर्ता को एक से अधिक पंक्ति चाहिए तब textarea लें।
textarea क्यों है
संपर्क फ़ॉर्म, टिकट, बायो और समीक्षाओं को स्क्रॉल ऊँचाई चाहिए। textarea उस पाठ को एक नामित फ़ील्ड के रूप में भेजता है। label, name और आकार संकेत अभी भी चाहिए — पर सामग्री टैगों के बीच है, input की तरह value में नहीं।
सीधा उत्तर
1) id, name, rows वाला textarea लिखें। 2) for से label जोड़ें। 3) डिफ़ॉल्ट पाठ टैगों के बीच — value नहीं। 4) वैकल्पिक: placeholder, maxlength, readonly, disabled, required, wrap। 5) बहुपंक्ति प्रविष्टि — पिछले form= जुड़ाव नहीं।
📊 Textarea attributes beginners use
| Attribute | Role | Beginner tip |
|---|---|---|
| name | Submit key | Required if the text should post with the form |
| id | Label hook | Match label for= for accessible naming |
| rows | Visible height hint | Lines of height before scrolling |
| cols | Visible width hint | Prefer CSS width for responsive layouts |
| placeholder | Soft hint | Disappears when the user types |
| maxlength | Character cap | Browser-enforced upper bound |
| readonly / disabled | Lock vs mute | readonly still submits; disabled usually does not |
| wrap | Soft/hard wrap | Affects how line breaks are submitted (soft vs hard) |
फ़ीडबैक फ़ॉर्म: लेबल वाला संदेश बॉक्स
छोटा फ़ीडबैक ईमेल को एकल-पंक्ति input और संदेश को textarea रखता है। शुरुआती पाठ टैगों के बीच है।
<form action="/feedback" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="6" cols="40"
placeholder="What went well? What can improve?">Thanks for reading —</textarea>
<button type="submit">Send feedback</button>
</form>
फ़ीडबैक डेमो पढ़ें
- बहुपंक्ति textarea है, input नहीं
- id label for से मेल खाता है
- name सबमिट पैराग्राफ की कुंजी है
- rows/cols आकार सुझाते हैं
- डिफ़ॉल्ट पाठ टैगों के बीच
- label स्पष्ट रखें
- यहाँ form= ज़रूरी नहीं — फ़ील्ड form के अंदर
आकार, सीमा और wrap
दूसरा डेमो: maxlength व wrap=soft वाला बायो; cols की जगह CSS। readonly सारांश।
<label for="bio">Short bio</label>
<textarea id="bio" name="bio" rows="4" maxlength="280"
wrap="soft"
style="width:100%; max-width:28rem; resize:vertical;"
placeholder="Up to 280 characters"></textarea>
<label for="summary">Auto summary (read-only)</label>
<textarea id="summary" name="summary" rows="3" readonly>Generated preview — edit the bio above.</textarea>
आकार डेमो पढ़ें
- maxlength लंबाई सीमित करता है
- wrap=soft दृश्य ब्रेक बिना hard
- CSS width और resize सुधारते हैं
- readonly दिखे, संपादन नहीं
- सबमिट के लिए name अभी भी
- अगला: सूची चुनने के लिए select
textarea बनाम input चुनें
- छोटी एक पंक्ति: input
- पैराग्राफ/संदेश: textarea
- आकार rows और CSS से; cols विरासत
- डिफ़ॉल्ट सामग्री टैगों के बीच — value नहीं
- हमेशा label और name
- संभव हो तो form में नेस्ट
- formaction/स्वामित्व से न उलझाएँ
अभ्यास — बनाएँ और आकार बदलें
- फ़ीडबैक कॉपी; टैगों के बीच पाठ बदलें
- rows घटाएँ
- maxlength जोड़ें
- cols की जगह CSS width
- अस्थायी value आज़माएँ फिर हटाएँ
- वाक्य: textarea टैगों के बीच; input में value
- सूची विकल्प अगले select में
आसान गलतियाँ
- value में डिफ़ॉल्ट पाठ
- name भूलना
- बिना label
- बहुपंक्ति जरूरत पर एकल input
- form=/formaction से उलझन
- केवल cols से responsive चौड़ाई
- readonly की जगह disabled
सार
- textarea = बहुपंक्ति पाठ
- label और अक्सर name
- डिफ़ॉल्ट पाठ टैगों के बीच
- rows/CSS; वैकल्पिक maxlength, placeholder, readonly
- पिछले फॉर्म-जुड़ाव गुण नहीं
- अगला: select
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी