` टैग पर ध्यान केंद्रित करेंगे, और इसका उपयोग फॉर्म में डेटा एकत्र करने के लिए कैसे किया जा सकता है।
HTML फॉर्म के बारे में अधिक जानने के लिए, HTML फॉर्म के लिए हमारी शुरुआती गाइड पढ़ें।
HTML `` टैग
HTML `` टैग एक सूची बनाता है जिससे उपयोगकर्ता एक या एकाधिक विकल्प चुन सकते हैं। एक `` एलिमेंट `` टैग में एक व्यक्तिगत विकल्प को दर्शाता है।
`` टैग एक फॉर्म फील्ड बनाता है जो क्लिक करने पर एक ड्रॉप-डाउन सूची प्रदर्शित करता है जिसमें से उपयोगकर्ता चुन सकता है।
`` टैग का सिंटैक्स इस प्रकार है:
<select></select>
अकेले, `` टैग के पास कोई विकल्प नहीं होता। हमें `` टैग में दिखाई देने वाले विकल्पों को परिभाषित करने के लिए `` टैग का उपयोग करने की आवश्यकता है।
यहाँ `` टैग का सिंटैक्स है:
<select> <option value="optionOne">Option One</option> </select>
`` टैग `` टैग के अंदर दिखाई देता है। इस उदाहरण में, हमने अपने `` टैग के साथ `value` एट्रिब्यूट भी निर्दिष्ट किया है।
यह उस डेटा मान को संग्रहीत करने के लिए उपयोग किया जाता है जो सर्वर को सबमिट किया जाएगा यदि उपयोगकर्ता कोई विशेष विकल्प चुनता है। इस मामले में, यदि उपयोगकर्ता सूची से Option One चुनता है, तो optionOne सर्वर को भेजा जाएगा।
प्रत्येक `` टैग में एक निर्दिष्ट `value` एट्रिब्यूट होना चाहिए।
HTML `` टैग सभी प्रमुख आधुनिक ब्राउज़रों द्वारा समर्थित है।
आपको `` HTML टैग का उपयोग क्यों करना चाहिए?
जब आप किसी फॉर्म फील्ड में उपयोगकर्ता द्वारा दर्ज किए जा सकने वाले मानों को प्रतिबंधित करना चाहते हैं तो `` टैग का उपयोग करना फायदेमंद होता है। यहाँ कुछ उदाहरण हैं जहां `` टैग उपयोगी हो सकता है:
उपयोगकर्ता को चुनने के लिए देशों की सूची प्रदान करना। उपयोगकर्ता को किसी उत्पाद के लिए उपलब्ध रंगों की सूची देना। उपयोगकर्ता को किसी उत्पाद की मात्रा चुनने की अनुमति देना (उदाहरण के लिए 1 से 10 के बीच)। इन मामलों में, विकल्प सीमित होते हैं। ड्रॉप-डाउन मेनू का उपयोग करने का मतलब है कि आप एक ऐसी प्रतिक्रिया प्राप्त कर सकते हैं जो आपके कोड के लिए समझ में आती है। ऐसा इसलिए है क्योंकि उपयोगकर्ता कोई भी मान दर्ज नहीं कर सकता जैसा वे टेक्स्ट फील्ड में कर सकते हैं, जिसका आप अनुमान नहीं लगा सकते।
HTML `` उदाहरण
मान लीजिए हम एक स्थानीय बेकरी के लिए एक वेब फॉर्म बना रहे हैं। हमें एक फॉर्म बनाने के लिए कहा गया है जो उपयोगकर्ता को ब्रेड ऑर्डर करने की अनुमति देता है। यह फॉर्म ब्रेड की एक ड्रॉप-डाउन सूची प्रस्तुत करना चाहिए जिससे उपयोगकर्ता एक ब्रेड चुन सके। विकल्प जो दिखाई देने चाहिए:
प्लेन व्हाइट प्लेन ब्राउन होल ग्रेन सोरडो डिफ़ॉल्ट रूप से, प्लेन व्हाइट चयनित होना चाहिए।
यह HTML ड्रॉप-डाउन मेनू बनाने के लिए, हम निम्न कोड का उपयोग कर सकते हैं:
<select name="breadType"> <option value="plainWhite" selected>Plain White</option> <option value="plainBrown">Plain Brown</option> <option value="wholeGrain">Whole Grain</option> <option value="sourdough">Sourdough</option> </select>
हमारा कोड लौटाता है:
Plain White Plain Brown Whole Grain Sourdough
सबसे पहले, हम अपने चयन सूची को परिभाषित करने के लिए `` टैग का उपयोग करते हैं। हम `name` एट्रिब्यूट निर्दिष्ट करते हैं, जो सेलेक्ट फॉर्म कंट्रोल का नाम निर्दिष्ट करता है, और हम एट्रिब्यूट को मान breadType असाइन करते हैं।
अगला, हम उपयोगकर्ता को प्रस्तुत किए जाने वाले विकल्पों की सूची बनाने के लिए चार `` टैग का उपयोग करते हैं। इनमें से प्रत्येक ` ` टैग में एक `value` एट्रिब्यूट निर्दिष्ट है। यह एट्रिब्यूट उस विकल्प का मान संग्रहीत करता है जो उपयोगकर्ता द्वारा फॉर्म सबमिट करने पर सर्वर को सबमिट किया जाएगा।
पहला `` टैग, जिसका लेबल टेक्स्ट Plain White प्रदर्शित करता है, में एक `selected` एट्रिब्यूट भी निर्दिष्ट है। यह Plain White को डिफ़ॉल्ट चयनित विकल्प बनाता है।
हम `multiple` एट्रिब्यूट का उपयोग करके उपयोगकर्ता को सूची में एकाधिक विकल्प चुनने की अनुमति दे सकते हैं:
<select name="breadType" multiple> <option value="plainWhite" selected="">Plain White</option> <option value="plainBrown">Plain Brown</option> <option value="wholeGrain">Whole Grain</option> <option value="sourdough">Sourdough</option> </select>
`multiple` एट्रिब्यूट एक कीवर्ड है। इसका मतलब है कि आपको एट्रिब्यूट को मान असाइन करने के लिए बराबर चिह्न का उपयोग करने की आवश्यकता नहीं है।
एकाधिक मान चुनने के लिए, विंडोज पर Ctrl बटन या मैक पर Cmd बटन दबाए रखें।
HTML `` टैग एट्रिब्यूट
`` टैग में कुछ विशिष्ट HTML एट्रिब्यूट होते हैं जिन्हें टैग पर लागू किया जा सकता हैं। ये इस प्रकार हैं:
एट्रिब्यूट मान विवरण autofocus autofocus दस्तावेज़ लोड होने पर ड्रॉप-डाउन सूची को फोकस देता है। disabled disabled इंगित करता है कि ड्रॉप-डाउन सूची अक्षम है (इसलिए उपयोगकर्ता सूची का उपयोग करके मान सबमिट नहीं कर सकता) form form_id उस फॉर्म को निर्दिष्ट करता है जिससे `` एलिमेंट जुड़ा हुआ है। multiple multiple उपयोगकर्ताओं को एकाधिक विकल्प चुनने की अनुमति देता है। name name एलिमेंट के लिए नाम निर्दिष्ट करता है। required required इंगित करता है कि फॉर्म फील्ड को सबमिट करने से पहले भरा जाना चाहिए। size number उपयोगकर्ता को दिखाए जाने वाले विकल्पों की संख्या निर्दिष्ट करता है।
निष्कर्ष
HTML `` एलिमेंट एक फॉर्म फील्ड बनाता है जो डिफ़ॉल्ट मानों की एक सूची प्रदर्शित करता है। उपयोगकर्ता सूची से एक या एकाधिक मान चुन सकता है। `` फील्ड तब उपयोगी होते हैं जब आप चाहते हैं कि उपयोगकर्ता संभावित मानों की पूर्वनिर्धारित सूची से एक मान चुने।
इस ट्यूटोरियल ने एक उदाहरण के संदर्भ में चर्चा की कि कैसे `` टैग का उपयोग करके HTML में ड्रॉप-डाउन सूची फॉर्म फील्ड बनाया जा सकता है।
क्या आप HTML प्रोग्रामिंग के बारे में अधिक जानना चाहते हैं? हमारा HTML सीखने का गाइड देखें। इस गाइड में HTML सीखने के लिए शीर्ष युक्तियाँ और आपके ज्ञान को बढ़ाने में मदद के लिए सीखने के संसाधनों की सूची शामिल है।
