HTML Textarea:चरण-दर-चरण मार्गदर्शिका

HTML textarea टैग का उपयोग एक प्रपत्र में एकाधिक पंक्तियों के साथ टेक्स्ट इनपुट फ़ील्ड बनाने के लिए किया जाता है। इसे <textarea> . से परिभाषित किया गया है टैग और असीमित संख्या में वर्ण धारण कर सकते हैं।

जब आप HTML में फ़ॉर्म बना रहे हों, तो आप यह तय कर सकते हैं कि आप टेक्स्ट की एक लंबी स्ट्रिंग को स्वीकार करना चाहते हैं। उदाहरण के लिए, यदि आप किसी खुदरा विक्रेता की वेबसाइट के लिए ग्राहक संपर्क फ़ॉर्म बना रहे हैं, तो आप एक ऐसा प्रपत्र तत्व बनाना चाहेंगे जो ग्राहक के सामने आने वाली समस्या का विस्तृत विवरण स्वीकार करे।

यहीं पर HTML <textarea> टैग आता है। <textarea> तत्व का उपयोग एक प्रपत्र तत्व बनाने के लिए किया जाता है जो बहु-पंक्ति पाठ संपादन सुविधाएँ प्रदान करता है। यह तत्व उपयोगी है यदि आप किसी उपयोगकर्ता से लंबे समय तक पाठ प्रतिक्रियाओं को स्वीकार करना चाहते हैं।

यह ट्यूटोरियल कुछ उदाहरणों के साथ चर्चा करेगा कि HTML <textarea> . का उपयोग कैसे करें अपने कोड में टैग करें। इस ट्यूटोरियल के अंत तक, आपके पास <textarea> का उपयोग करने के लिए आवश्यक सभी ज्ञान होगा एक समर्थक की तरह टैग करें!

HTML Textarea टैग

<textarea> एक प्रपत्र में एक बहुपंक्ति पाठ इनपुट नियंत्रण क्षेत्र को परिभाषित करने के लिए टैग का उपयोग किया जाता है। <textarea> टैग असीमित संख्या में वर्ण धारण करने में सक्षम है।

<textarea> . के लिए सिंटैक्स टैग इस प्रकार है:

<textarea rows="10" cols="10">
Placeholder contents
</textarea>

आइए हमारे कोड को तोड़ दें। <textarea> टैग का प्रयोग हमारे वेब फॉर्म में टेक्स्ट एरिया बॉक्स को परिभाषित करने के लिए किया जाता है। <input> के विपरीत टैग, <textarea> टैग में दोनों ओपनिंग होनी चाहिए (<textarea> ) और एक क्लोजिंग टैग (</textarea> ) ऐसा इसलिए है क्योंकि टेक्स्ट क्षेत्र जो डिफ़ॉल्ट टेक्स्ट दिखाएगा वह दो टैगों के बीच समाहित है।

हमने अपने उदाहरण में दो विशेषताएँ भी निर्दिष्ट की हैं:

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

• पंक्तियां ब्राउज़र को निर्देश देता है कि टेक्स्ट क्षेत्र में डिफ़ॉल्ट रूप से कितनी पंक्तियाँ होनी चाहिए। दूसरे शब्दों में, पंक्ति विशेषता टेक्स्ट क्षेत्र की ऊंचाई निर्दिष्ट करती है।
• सहकर्मी टेक्स्ट क्षेत्र में डिफ़ॉल्ट रूप से कॉलम की संख्या होनी चाहिए। दूसरे शब्दों में, cols विशेषता टेक्स्ट क्षेत्र की चौड़ाई निर्दिष्ट करती है।

मान लीजिए कि हम एक स्थानीय कपड़ों की दुकान के लिए एक वेब फॉर्म बना रहे हैं। इस फ़ॉर्म से ग्राहकों को उनकी खरीदारी पर फ़ीडबैक देने की अनुमति मिलनी चाहिए. चूंकि हम उपयोगकर्ताओं को फीडबैक के विस्तृत अंश प्रस्तुत करने के लिए जगह देना चाहते हैं, हम एक <textarea> का उपयोग करने जा रहे हैं उपयोगकर्ता की प्रतिक्रिया एकत्र करने के लिए HTML तत्व।

फीडबैक फॉर्म बनाने के लिए हम निम्नलिखित कोड का उपयोग कर सकते हैं:

<form>
	<label for="feedback">What feedback do you have for us?</label><br /><br />
	<textarea rows="5" cols="30" id="feedback" name="feedback">
	Your feedback goes here.
	</textarea>
</form>

हमारा कोड लौटाता है:

आइए हमारे कोड को तोड़ दें। सबसे पहले, हमने एक <form> . घोषित किया टैग जो हमारे वेब फॉर्म को परिभाषित करने के लिए उपयोग किया जाता है। हमने तब एक <label> . का उपयोग किया था टैग हमारे पृष्ठ पर एक लेबल जोड़ने के लिए उपयोगकर्ता से पूछ रहा है What feedback do you have for us?

फिर, हमने एक <textarea> . का उपयोग किया फीडबैक फॉर्म बनाने के लिए टैग। हमने चार विशेषताएँ निर्दिष्ट कीं, जो इस प्रकार थीं:

• पंक्तियों को 5 पर सेट किया जाता है और उन पंक्तियों की संख्या को संग्रहीत करता है जो फ़ील्ड में होनी चाहिए।
• cols 30 पर सेट है और फ़ील्ड में जितने कॉलम होने चाहिए, उन्हें स्टोर करता है।
• आईडी फ़ॉर्म को असाइन किया गया विशिष्ट पहचानकर्ता है, जिसका उपयोग हम फ़ॉर्म सबमिट करते समय किया जाएगा।
• नाम का उपयोग प्रपत्र की पहचान करने के लिए भी किया जाता है और यदि हम किसी वेब सर्वर पर प्रपत्र जमा करना चाहते हैं तो यह आवश्यक है।

<textarea> टैग सभी प्रमुख ब्राउज़रों द्वारा समर्थित है।

उपरोक्त उदाहरण <textarea> . का मूल कार्यान्वयन है टैग, लेकिन हम अपने फॉर्म को और अधिक उन्नत बना सकते हैं।

HTML Textarea उदाहरण

आइए दो और उन्नत उदाहरणों के माध्यम से देखें कि हम <textarea> . का उपयोग कैसे कर सकते हैं टेक्स्ट क्षेत्र बनाने के लिए टैग करें।

न्यूनतम और अधिकतम लंबाई

आइए अपने कपड़ों की दुकान के उदाहरण पर लौटते हैं। मान लीजिए कि हम उपयोगकर्ता द्वारा सबमिट किए गए वर्णों की संख्या को 1000 तक सीमित करना चाहते हैं, ताकि उपयोगकर्ताओं को अपनी प्रतिक्रिया लिखते समय संक्षिप्त होने के लिए प्रोत्साहित किया जा सके। हम यह भी सुनिश्चित करना चाहते हैं कि उपयोगकर्ता फ़ॉर्म में कुछ लिखें, यह सुनिश्चित करने के लिए हम न्यूनतम वर्ण सीमा 10 पर सेट करना चाहते हैं।

यही वह जगह है जहां न्यूनतम लम्बाई और अधिकतम लम्बाई विशेषताएं आती हैं। न्यूनतम लम्बाई का उपयोग उपयोगकर्ता द्वारा लिखे जाने वाले वर्णों की न्यूनतम संख्या निर्दिष्ट करने के लिए किया जाता है, और अधिकतम लम्बाई का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि उपयोगकर्ता किसी फ़ॉर्म में अधिकतम वर्णों को लिख सकता है।

यहां हमारे पहले के वेब फ़ॉर्म का एक उदाहरण दिया गया है जिसमें न्यूनतम लंबाई और अधिकतम लंबाई विशेषताएँ सेट हैं:

<form>
	<textarea rows="5" cols="30" id="feedback" name="feedback" minlength="10" maxlength="1000">
	Your feedback goes here.
	</textarea>
</form>

हमारा फॉर्म लौटाता है:

हमारे फ़ॉर्म में कोई दृश्य परिवर्तन नहीं हैं, लेकिन यदि हम अपना फ़ॉर्म सबमिट करने का प्रयास करते हैं, तो उपयोगकर्ता द्वारा 1000 से अधिक वर्ण लिखे जाने पर फ़ॉर्म की सामग्री को अमान्य माना जाएगा।

यह ध्यान रखना महत्वपूर्ण है कि, भले ही उपयोगकर्ता हमारे फ़ॉर्म में 10 से कम वर्ण लिखता हो, फिर भी टेक्स्ट क्षेत्र को मान्य माना जाएगा। यदि हम न्यूनतम सीमा को लागू करना चाहते हैं, तो हमें required . निर्दिष्ट करना होगा विशेषता।

प्लेसहोल्डर टेक्स्ट

हमारे उपरोक्त वेब फॉर्म में, हम अपने फॉर्म के अंदर डिफ़ॉल्ट टेक्स्ट निर्दिष्ट करते हैं। यह पाठ बताता है Your feedback goes here. हालांकि यह उपयोगी जानकारी है, उपयोगकर्ता को डिफ़ॉल्ट टेक्स्ट को मैन्युअल रूप से हटाना होगा यदि वे इसे अपने फॉर्म प्रतिक्रिया में नहीं चाहते हैं।

यदि आप कोई प्लेसहोल्डर मान निर्दिष्ट करना चाहते हैं, तो आप placeholder . का उपयोग कर सकते हैं गुण। यह विशेषता एक प्लेसहोल्डर मान बताती है जो फॉर्म के खाली होने पर दिखाई देता है। जैसे ही उपयोगकर्ता बॉक्स में टाइप करना शुरू करता है, प्लेसहोल्डर गायब हो जाता है।

यहां <textarea> . का एक उदाहरण दिया गया है जिसमें प्लेसहोल्डर टेक्स्ट है Your feedback goes here. :

<textarea placeholder="Your feedback goes here." rows="5" cols="30">
</textarea>

हमारा कोड लौटाता है:

जैसा कि आप देख सकते हैं, टेक्स्ट Your feedback goes here. टेक्स्ट बॉक्स में दिखाई देता है। हालांकि, जब उपयोगकर्ता टाइप करना शुरू करता है, तो यह टेक्स्ट गायब हो जाता है। हम जानते हैं कि यह टेक्स्ट एक प्लेसहोल्डर है क्योंकि यह हल्के भूरे रंग में है, जबकि डिफ़ॉल्ट टेक्स्ट, जैसा कि हमने इस लेख में अपने पहले उदाहरण में निर्दिष्ट किया है, पूरी तरह से काले टेक्स्ट में दिखाई देता है (जब तक कि अन्यथा निर्दिष्ट न हो)।

HTML Textarea विशेषताएँ

<textarea> टैग कई टैग-विशिष्ट विशेषताओं को स्वीकार करता है। इसके अलावा, <textarea> टैग HTML में सभी वैश्विक विशेषताओं का समर्थन करता है।

यहाँ टैग-विशिष्ट विशेषताएँ हैं जो <textarea> . द्वारा समर्थित हैं टैग:

निष्कर्ष

एचटीएमएल <textarea> टैग का उपयोग मल्टीलाइन टेक्स्ट इनपुट एलिमेंट बनाने के लिए किया जाता है। यदि आप किसी उपयोगकर्ता से डेटा की लंबी स्ट्रिंग एकत्र करना चाहते हैं तो ये उपयोगी हो सकते हैं।

इस ट्यूटोरियल में उदाहरणों के संदर्भ में चर्चा की गई है कि <textarea> . का उपयोग कैसे करें टेक्स्ट क्षेत्र बनाने के लिए टैग। इस ट्यूटोरियल ने <textarea> . द्वारा प्रस्तुत टैग-विशिष्ट विशेषताओं के साथ एक संदर्भ तालिका भी प्रदान की है उपनाम। अब आप <textarea> . का उपयोग शुरू करने के लिए तैयार हैं HTML विशेषज्ञ की तरह टैग करें!