' <विकल्प> ” टैग का उपयोग उस विकल्प को परिभाषित करने के लिए किया जाता है जिसे उपयोगकर्ता ड्रॉपडाउन मेनू से या वेब प्रपत्रों में चयन सूची से चुन सकता है। ' <विकल्प> ” टैग डेवलपर्स को विकल्पों का एक सेट बनाने की अनुमति देता है जिससे उपयोगकर्ता कोई भी विकल्प चुन सकता है। इसका उपयोग विभिन्न अनुप्रयोगों जैसे सर्वेक्षण, ऑनलाइन शॉपिंग साइट, पंजीकरण फॉर्म आदि में किया जा रहा है।
यह आलेख व्यवहारिक उदाहरणों के साथ HTML में विकल्प टैग प्रदर्शित करता है:
- विकल्प टैग क्या है और HTML में इसका उपयोग कैसे करें?
- ड्रॉपडाउन सूची का निर्माण
- स्वत: पूर्ण सूची का निर्माण
विकल्प टैग क्या है और HTML में इसका उपयोग कैसे करें?
विकल्प टैग का उपयोग 'के साथ किया जा सकता है <चुनें> ' और ' <डेटालिस्ट> ” टैग। के मामले में ' <डेटालिस्ट> ” टैग, यह विकल्पों की एक सूची बनाता है जो एक ब्राउज़र द्वारा स्वत: पूर्ण हो सकता है। आइए हम 'के बीच संबंधों की बेहतर समझ के लिए कुछ उदाहरणों के माध्यम से चलते हैं' <विकल्प> 'के साथ टैग करें' <चुनें> ' और ' <डेटालिस्ट> 'टैग:
उदाहरण 1: ड्रॉपडाउन सूची बनाना
' <विकल्प> ” टैग का उपयोग “ के साथ किया जाता है <चुनें> ” टैग वेब पेज पर एक ड्रॉपडाउन सूची बनाने के लिए। ' <विकल्प> ड्रॉपडाउन सूची में प्रत्येक विकल्प/सूची आइटम बनाता है। बेहतर समझ के लिए हम नीचे दिए गए कोड स्निपेट का पालन करें:
< एच 2 > प्रोग्रामिंग भाषा एच 2 >
< लेबल के लिए = 'ठेला-हथियार' > एक प्रोग्रामिंग हथियार चुनें: लेबल >
< चुनना पहचान = 'प्रोग-सूचियाँ' >
< विकल्प कीमत = '' > कोई विकल्प चुनें विकल्प >
< विकल्प कीमत = 'सी ++' > सी ++ विकल्प >
< विकल्प कीमत = '।जाल' > डॉट नेट विकल्प >
< विकल्प कीमत = 'नोडजेस' > नोड जे.एस विकल्प >
चुनना >
उपरोक्त कोड स्निपेट में:
- पहले ' <लेबल> 'टैग का उपयोग डेटा प्रदर्शित करने के लिए किया जाता है और इसे' के साथ असाइन किया जाता है <चुनें> 'इसके उपयोग से टैग करें' के लिए ' गुण।
- उसके बाद, ' <चुनें> ” टैग का उपयोग ड्रॉपडाउन सूची के लिए वातावरण बनाने के लिए किया जाता है।
- अगला, ' <विकल्प> ” टैग का उपयोग सूची आइटम को ड्रॉपडाउन सूची आइटम के रूप में रखने के लिए किया जाता है।
ड्रॉपडाउन सूची की संरचना स्थापित करने के बाद, अब हम कुछ बुनियादी स्टाइल लागू करते हैं:
लेबल {प्रदर्शन क्षेत्र;
मार्जिन-बॉटम: 5 पीएक्स;
}
चुनना {
पैडिंग: 5 पीएक्स;
सीमा-त्रिज्या: 5px;
चौड़ाई: 200 पीएक्स;
}
CSS गुणों की व्याख्या नीचे वर्णित है:
- सबसे पहले, 'का चयन करें लेबल ' तत्व और फिर 'ब्लॉक' और '5px' के मानों को CSS 'पर सेट करें' दिखाना ' और ' मार्जिन नीचे ' गुण।
- अगला, ' चुनना 'तत्व का चयन किया जाता है और CSS को'5px', '5px' और '200px' के मान प्रदान करता है ' गद्दी ”, “ बॉर्डर-त्रिज्या ' और ' चौड़ाई ' गुण, क्रमशः। इन गुणों का उपयोग उपयोगकर्ता दृश्यता बढ़ाने के लिए किया जाता है।
उपरोक्त कोड स्निपेट के निष्पादन के बाद, वेबपेज इस तरह दिखता है:
उपरोक्त आउटपुट से पता चलता है कि 'का उपयोग करके ड्रॉपडाउन बनाया गया है <विकल्प> 'के साथ टैग करें' <चुनें> ' उपनाम।
उदाहरण 2: स्वत: पूर्ण सूची का निर्माण
' <विकल्प> ” टैग का प्रयोग “ के साथ किया जाता है <डेटालिस्ट> ” एक स्वत: पूर्ण सूची बनाने के लिए टैग करें। इसका उपयोग 'के साथ किया जाता है' <इनपुट> ” टैग जो स्वतः पूर्ण सूची के अंदर उपलब्ध विकल्पों द्वारा भरा जाता है। HTML का उपयोग करके स्वतः पूर्ण सूची बनाने के लिए कोड नीचे दिए गए कोड स्निपेट में दिखाया गया है:
< लेबल के लिए = 'प्रोग-टूल्स' > या प्रकार एक प्रोग्रामिंग उपकरण: लेबल >< इनपुट प्रकार = 'मूलपाठ' पहचान = 'प्रोग-टूल्स' सूची = 'औजार' >
< datalist पहचान = 'औजार' >
< विकल्प कीमत = 'सी ++' >
< विकल्प कीमत = 'सभा' >
< विकल्प कीमत = '।जाल' >
< विकल्प कीमत = 'पीएचपी' >
< विकल्प कीमत = 'माणिक' >
< विकल्प कीमत = 'स्विफ्ट' >
< विकल्प कीमत = 'नोड जेएस' >
< विकल्प कीमत = 'प्रतिक्रिया' >
< विकल्प कीमत = 'मोंगो' >
< विकल्प कीमत = 'जावा' >
< विकल्प कीमत = 'अजगर' >
datalist >
उपरोक्त कोड स्निपेट में:
- सबसे पहले, 'जोड़ें' <लेबल> ” टैग जो HTML तत्व के साथ पाठ प्रदर्शित करता है।
- अगला, 'का उपयोग करें <इनपुट> ” टैग जो उपयोगकर्ता द्वारा मैन्युअल रूप से भरा जाता है या ऑटो-पूर्ण सूची के अंदर उपलब्ध विकल्पों द्वारा स्वतः भरा जा सकता है।
- उसके बाद, 'का उपयोग करें <डेटालिस्ट> 'टैग करें और इसे सेट करें' पहचान 'विशेषता मान' के मान के बराबर सूची '' की विशेषता <इनपुट> ' उपनाम।
- अगला, 'का उपयोग करें <विकल्प> ' टैग '
उपरोक्त कोड स्निपेट के निष्पादन के बाद, वेबपेज इस तरह दिखाई देता है:
आउटपुट से पता चलता है कि स्वत: पूर्ण सूची 'का उपयोग करके बनाई गई है' <विकल्प> 'के संयोजन के साथ टैग' <डेटालिस्ट> ' और ' <इनपुट> ” टैग।
निष्कर्ष
' <विकल्प> ” टैग डेवलपर को विकल्प सूची के लिए विकल्प बनाने की अनुमति देता है, जिसमें से उपयोगकर्ता कोई भी विकल्प चुन सकता है। यह '<विकल्प>' टैग 'के साथ उपयोग किया जा सकता है <चुनें> ' और ' <डेटालिस्ट> ”वेबसाइट डिजाइन की आवश्यकता के अनुसार टैग। ड्रॉपडाउन प्रभाव के निर्माण के लिए '<विकल्प>' टैग का उपयोग '<चयन>' टैग के साथ किया जाता है और ऑटो-पूर्ण प्रभाव बनाने के लिए इसे 'के साथ उपयोग करें' <डेटालिस्ट> 'के साथ टैग करें' <इनपुट> ' उपनाम। यह लेख दर्शाता है कि HTML में विकल्प टैग क्या है।