HTML टेक्स्टएरिया: चरण-दर-चरण मार्गदर्शिका

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

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

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

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

HTML टेक्स्टएरिया टैग

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

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

<textarea rows="10" cols="10"> प्लेसहोल्डर सामग्री </textarea>

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

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

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

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

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

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

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

<form> <label for="feedback">आपके पास हमारे लिए क्या प्रतिक्रिया है?</label><br /><br /> <textarea rows="5" cols="30" id="feedback" name="feedback"> आपकी प्रतिक्रिया यहाँ जाती है। </textarea> </form>

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

आइए हमारे कोड को समझते हैं। सबसे पहले, हमने एक <form> टैग घोषित किया जिसका उपयोग हमारे वेब फॉर्म को परिभाषित करने के लिए किया जाता है। फिर हमने अपने पेज पर एक लेबल जोड़ने के लिए <label> टैग का उपयोग किया जिसमें यूजर से पूछा गया आपके पास हमारे लिए क्या प्रतिक्रिया है?

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

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

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

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

HTML टेक्स्टएरिया उदाहरण

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

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

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

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

यहां हमारे पहले के वेब फॉर्म का एक उदाहरण है जिसमें minlength और maxlength विशेषताएँ सेट हैं:

<form> <textarea rows="5" cols="30" id="feedback" name="feedback" minlength="10" maxlength="1000"> आपकी प्रतिक्रिया यहाँ जाती है। </textarea> </form>

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

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

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

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

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

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

यहां एक <textarea> का उदाहरण है जिसमें प्लेसहोल्डर टेक्स्ट आपकी प्रतिक्रिया यहाँ जाती है। है:

<textarea placeholder="आपकी प्रतिक्रिया यहाँ जाती है।" rows="5" cols="30"> </textarea>

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

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

HTML टेक्स्टएरिया विशेषताएँ

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

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

निष्कर्ष

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

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