फॉर्म कंट्रोल्स (Select & Textarea)
आज हम लंबे जवाब और मेनू जोड़ते हैं — multi-line टेक्स्ट के लिए textarea, dropdown के लिए select, और required ताकि खाली field submit न हो।
इस पाठ में आप क्या सीखेंगे
- 1textarea multi-line टेक्स्ट रखता है
- 2select dropdown मेनू बनाता है
- 3option उस मेनू में एक choice है
- 4value वह है जो form भेजता है
- 5required खाली submit रोकता है
- 1
ये controls क्या हैं
पिछले लेसन में
inputtypes बदले। आज लंबे message बॉक्स और choices की सूची चाहिए। ये एक-लाइन inputs नहीं हैं।<textarea>multi-line टेक्स्ट रखता है।<select>के साथ<option>dropdown बनाता है।requiredattribute खाली field पर submit रोकता है। - 2
समस्या: लंबे संदेश और तय ड्रॉपडाउन मेनू कैसे बनाएँ
किसी ग्राहक का विस्तृत संदेश या समीक्षा एक छोटी सी इनपुट लाइन में नहीं समा सकती। वहीं दूसरी ओर, देश या कोर्स चुनते समय यूज़र से टाइप करवाना ग़लत स्पेलिंग का कारण बनता है।
HTML ने इसके लिए विशेष फॉर्म कंट्रोल्स दिए: लंबे पैराग्राफ्स के लिए
<textarea>, विकल्पों की ड्रॉपडाउन सूची के लिए<select>और<option>, तथा खाली सबमिशन रोकने के लिएrequired। - 3
Browser कैसे Textarea, Option Values और Required Validation को संभालता है
साधारण इनपुट के विपरीत,
<textarea>को क्लोजिंग टैग</textarea>की आवश्यकता होती है। इसके बीच लिखा गया टेक्स्ट इसका डिफ़ॉल्ट मान बन जाता है।<select>में जो टेक्स्ट यूज़र को दिखता है वह टैग्स के बीच होता है, जबकि सर्वर को भेजा जाने वाला डेटाvalueएट्रिब्यूट में होता है।requiredलगा होने पर खाली फ़ील्ड पर ब्राउज़र चेतावनी देता है। - 4
आज की प्रैक्टिस: Select, Textarea और Required से बना फीडबैक फॉर्म
नीचे दिए गए फॉर्म में ड्रॉपडाउन से कोर्स चुनें और टेक्स्टएरिया में संदेश लिखें। बिना कोर्स चुने फॉर्म सबमिट करने की कोशिश करें और देखें कि कैसे
requiredका नेटिव अलर्ट आता है। - 5
बेस्ट प्रैक्टिस: क्लोजिंग टैग्स, वैल्यू मैपिंग और अनिवार्य फ़ील्ड्स
जवाब छोटी तय सूची हों तो select। लिखने की जगह चाहिए तो textarea। सच में खाली न छोड़ने वाले fields पर ही
requiredलगाओ।
यूज़र को पूर्व-निर्धारित विकल्पों में से एक चुनने देता है। टाइपिंग की गलतियाँ रोकता है और डेटा को सुसंगत रखता है।
लंबे संदेश, समीक्षा या पते लिखने के लिए। इसमें Enter दबाकर नई लाइन बनाई जा सकती है। क्लोजिंग टैग अनिवार्य है।
लाइन-बाय-लाइन
<select id="course" name="course" required>Dropdown शुरू।
namesubmit होता है।requiredका मतलब असली choice ज़रूरी है।<option value="html">HTML</option>एक मेनू आइटम। लोग “HTML” देखते हैं। Form value के रूप में
htmlभेजता है।<textarea id="message" name="message" rows="3" required>Multi-line बॉक्स।
rowsऊँचाई का संकेत। Closing</textarea>ज़रूरी है।
खुद ट्राई करो
Feedback form बनाओ: rating के लिए required <select> (1–5) और comments के लिए required <textarea>। दोनों labels को for / id से जोड़ो।
हिंट: Placeholder option पर value="" रखो ताकि required “कोई choice नहीं” पकड़ सके।
💡 समाधान देखें (यदि अटक गए हों)
<form>
<label for="rating">रेटिंग (1-5):</label>
<select id="rating" name="rating" required>
<option value="">-- रेटिंग चुनें --</option>
<option value="5">5 - बहुत बढ़िया</option>
<option value="4">4 - अच्छा</option>
<option value="3">3 - ठीक-ठाक</option>
<option value="2">2 - खराब</option>
<option value="1">1 - बहुत खराब</option>
</select>
<label for="feedback">अपनी राय लिखें:</label>
<textarea id="feedback" name="feedback" rows="4" required></textarea>
<button type="submit">फीडबैक भेजें</button>
</form>क्या <textarea> टैग <input> की तरह सेल्फ-क्लोजिंग (void) टैग है (जैसे <textarea />)?
गलती कहाँ होती है
- 1.Textarea को empty tag समझना। इसे
</textarea>चाहिए। - 2.हर option को एक जैसा खाली value देना। फिर form नहीं बता पाता कौन सी choice चुनी गई।
इंटरव्यू की तैयारी
Q: <input type="text"> की जगह <textarea> कब इस्तेमाल करना चाहिए?↓
जब भी यूज़र को एक से अधिक पंक्तियों में विस्तृत जानकारी लिखनी हो (जैसे पता, फीडबैक या विस्तृत संदेश)। यह लाइन ब्रेक्स को सुरक्षित रखता है और यूज़र को बॉक्स का आकार बदलने की सुविधा देता है।
Q: Option के टेक्स्ट कंटेंट और उसके value एट्रिब्यूट में क्या अंतर है?↓
<option>...</option> के बीच लिखा टेक्स्ट वह लेबल है जो यूज़र को ड्रॉपडाउन मेनू में दिखाई देता है। जबकि value एट्रिब्यूट वह तकनीकी कोड या मान है जो सर्वर पर भेजा जाता है।
Q: <select> पर required एट्रिब्यूट कैसे काम करता है?↓
ड्रॉपडाउन के पहले प्लेसहोल्डर विकल्प को value="" (खाली स्ट्रिंग) देकर रखने पर, ब्राउज़र इसे अमान्य मानता है और यूज़र द्वारा किसी वैध विकल्प को चुने बिना फॉर्म सबमिट नहीं होने देता।