जैसे-जैसे हम HTML का अपना ज्ञान बढ़ाते हैं, कई चीजों में से एक जिस पर हमें विचार करना शुरू करना होगा वह यह है कि हम जो बनाते हैं वह हमारे पेज का उपयोग करने वाले लोगों के अनुभव को कैसे प्रभावित करेगा। जिन चीजों को हमें देखने की आवश्यकता है उनमें से एक यह है कि वेब पेज का संगठन अनुभव को कैसे बदलेगा। एक पेज जो बहुत अव्यवस्थित है, निश्चित रूप से प्रभावित करेगा कि क्लाइंट्स पेज पर रहने और साइट पर रहते हुए जो करने का इरादा रखते हैं उसे पूरा करने का फैसला करते हैं या नहीं।
हमारी साइट पर फॉर्म्स को व्यवस्थित करने के तरीकों में से एक यह है कि रेडियो बटन इनपुट्स या चेकबॉक्सेस को अपने स्वयं के ड्रॉपडाउन में नेस्ट किया जाए ताकि यूजर सूची के माध्यम से स्क्रॉल करके एक विकल्प ढूंढ सके।
इस लेख में, हम सीखेंगे कि HTML का लाभ कैसे उठाया जाए ताकि हम एक <select> ड्रॉपडाउन बना सकें जिसे फॉर्म एलिमेंट के रूप में उपयोग किया जाएगा। यदि आप देखना चाहते हैं कि नेवबार ड्रॉपडाउन मेनू कैसे बनाया जा सकता है, तो कृपया CSS ड्रॉपडाउन्स देखें।
बुनियादी संरचना
HTML ड्रॉपडाउन मेनू की बुनियादी संरचना एक <select> एलिमेंट है जो ग्रुपिंग का नाम और पहचान करता है, और कई <option> टैग्स जो आपके ड्रॉपडाउन की सामग्री बनाते हैं।
शुरू करने के लिए, आइए उस ड्रॉपडाउन का कंकाल बनाएं। "baseball-teams" की id और name के साथ एक <select> एलिमेंट लिखें। id हमारी मदद करेगी अगर हम स्टाइलिंग को एडजस्ट करना चाहते हैं। name विशेषता हमारी मदद करती है जब हम फॉर्म डेटा का उपयोग करना चाहते हैं जब एक टीम चुनी जाती है और हम जानकारी को सर्वर पर सबमिट करना चाहते हैं।
<!DOCTYPE html> <html> <body> <h1>द सेलेक्ट एलिमेंट</h1> <p>सेलेक्ट एलिमेंट का उपयोग ड्रॉप-डाउन सूची बनाने के लिए किया जाता है।</p> <form onsubmit=handleSubmit(event)> <label for="baseball-teams">एक बेसबॉल टीम चुनें:</label> <select id="baseball-teams" name="baseball-teams"> <option selected value="">टीम चुनें</option> <option value="Arizona Diamondbacks">Arizona Diamondbacks</option> <option value="Atlanta Braves">Atlanta Braves</option> <option value="Baltimore Orioles">Baltimore Orioles</option> <option value="Boston Red Sox">Boston Red Sox</option> <option value="Chicago Cubs">Chicago Cubs</option> <option value="Chicago White Sox">Chicago White Sox</option> <option value="Cincinnati Reds">Cincinnati Reds</option> <option value="Cleveland Indians">Cleveland Indians</option> <option value="Colorado Rockies">Colorado Rockies</option> <option value="Detroit Tigers">Detroit Tigers</option> <option value="Houston Astros">Houston Astros</option> <option value="Kansas City Royals">Kansas City Royals</option> <option value="LA Angels">Los Angeles Angels of Anaheim</option> <option value="LA Dodgers">Los Angeles Dodgers</option> <option value="Miami Marlins">Miami Marlins</option> <option value="Milwaukee Brewers">Milwaukee Brewers</option> <option value="Minnesota Twins">Minnesota Twins</option> <option value="NY Mets">New York Mets</option> <option value="NY Yankees">New York Yankees</option> <option value="Oakland Athletics">Oakland Athletics</option> <option value="Philadelphia Phillies">Philadelphia Phillies</option> <option value="Pittsburgh Pirates">Pittsburgh Pirates</option> <option value="San Diego Padres">San Diego Padres</option> <option value="San Francisco Giants">San Francisco Giants</option> <option value="Seattle Mariners">Seattle Mariners</option> <option value="STL">St. Louis Cardinals</option> <option value="Tampa">Tampa Bay Rays</option> <option value="TX">Texas Rangers</option> <option value="Toronto" value="LA Angels">Toronto Blue Jays</option> <option value="Washington">Washington Nationals</option> </select> <br><br> <input type="submit" value="सबमिट"> </form> <p>"सबमिट" बटन पर क्लिक करें और फॉर्म का डेटा नीचे दिखाया जाएगा।</p> <h3></h3> <script async defer> const handleSubmit = (event) => { event.preventDefault() let select = document.getElementById('baseball-teams'); let option = select.options[select.selectedIndex]; let result = document.querySelector('h3'); result.textContent = option.text; } </script> </body> </html>
इस बिंदु पर अपना कोड चलाने पर, आप एक बहुत ही बुनियादी ड्रॉपडाउन देखेंगे। पहला विकल्प बताता है कि ड्रॉपडाउन विकल्पों का मान क्या है। इस मामले में, वे चाहते हैं कि हम एक बेसबॉल टीम चुनें। ड्रॉपडाउन पर क्लिक करें और आप मेजर लीग की सभी टीमों के मान देखेंगे।
जब आप कोई मान चुनते हैं, तो यह इसे <select> के चुने हुए इंडेक्स को असाइन करता है। यह वही है जो आपके द्वारा किसी भी प्रकार के लॉजिक में मदद करेगा जब आप तय करते हैं कि डेटा के साथ क्या करना है। चुने हुए इंडेक्स का नाम और मान जानना बहुत महत्वपूर्ण है यदि आप उस डेटा के साथ कुछ करना चाहते हैं।
आप फॉर्म डेटा के साथ क्या करना है इसके बारे में और अध्ययन करेंगे जब आप बैकएंड का अध्ययन करेंगे - दस्तावेज़ के नीचे JavaScript के साथ क्या हो रहा है इसके बारे में चिंता न करें। केवल इस बारे में चिंता करें कि पेज पर ड्रॉपडाउन प्राप्त करने के लिए क्या करना है - <select> और <option> एलिमेंट्स।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद वे अपनी टेक जॉब संभावनाओं के बारे में अधिक आश्वस्त महसूस करते हैं। आज ही बूटकैंप से जुड़ें।
औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी पाने तक।
निष्कर्ष
इस लेख में हमने फॉर्म्स के लिए ड्रॉपडाउन मेनू बनाना सीखा। अपने यूजर्स को कई विकल्पों में से चयन करने का तरीका देने के लिए <select> और <option> एलिमेंट्स का उपयोग करें। एक बार जब आप यहां बुनियादी बातों को समझ लेते हैं, तो देखें कि <optgroup> क्या करता है!
