जैसे ही हम एचटीएमएल के बारे में अपने ज्ञान का विस्तार करते हैं, हमें जिन चीजों पर विचार करना शुरू करना चाहिए उनमें से एक यह है कि हम जो बनाते हैं वह हमारे पेज का उपयोग करने वाले लोगों के अनुभव को कैसे प्रभावित करेगा। हमें जिन चीजों पर ध्यान देने की आवश्यकता है उनमें से एक यह है कि वेब पेज का संगठन अनुभव को कैसे बदलेगा। एक पृष्ठ जो बहुत अधिक अव्यवस्थित है, निश्चित रूप से प्रभावित करेगा कि ग्राहक पृष्ठ पर बने रहने का निर्णय लेते हैं या नहीं और साइट पर रहते हुए वे जो करना चाहते हैं उसे पूरा करते हैं।
हमारी साइट पर प्रपत्रों को व्यवस्थित करने के तरीकों में से एक यह है कि रेडियो बटन इनपुट या चेकबॉक्स को अपने स्वयं के ड्रॉपडाउन में घोंसला बनाकर रखा जाता है ताकि उपयोगकर्ता एक विकल्प खोजने के लिए सूची में स्क्रॉल कर सके।
इस लेख में, हम सीखेंगे कि HTML का लाभ कैसे उठाया जाए ताकि हम एक <select> . बना सकें ड्रॉपडाउन जिसे फॉर्म एलिमेंट के रूप में इस्तेमाल किया जाएगा। यदि आप यह देखना चाहते हैं कि नेवबार ड्रॉपडाउन मेनू कैसे बनाया जा सकता है, तो कृपया CSS ड्रॉपडाउन चेकआउट करें।
मूल संरचना
HTML ड्रॉपडाउन मेनू की मूल संरचना एक <select> . है तत्व जो समूह को नाम और पहचान देता है, और एकाधिक <option> टैग जो आपके ड्रॉपडाउन की सामग्री बनाते हैं।
शुरू करने के लिए, आइए उस ड्रॉपडाउन का कंकाल बनाएं। एक <select> लिखें आईडी के साथ तत्व और "बेसबॉल-टीम" का नाम। अगर हम स्टाइल को एडजस्ट करना चाहते हैं तो आईडी हमारी मदद करेगी। नाम विशेषता हमारी मदद करती है जब हम किसी टीम के चयन के बाद फॉर्म डेटा का उपयोग करना चाहते हैं और हम सर्वर को जानकारी जमा करना चाहते हैं।
<!DOCTYPE html>
<html>
<body>
<h1>The select element</h1>
<p>The select element is used to create a drop-down list.</p>
<form onsubmit=handleSubmit(event)>
<label for="baseball-teams">Choose a baseball team:</label>
<select id="baseball-teams" name="baseball-teams">
<option selected value="">Select Team</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="Submit">
</form>
<p>Click the "Submit" button and the form's data will be shown below.</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> . के चयनित इंडेक्स को असाइन करता है . जब आप यह तय करते हैं कि डेटा के साथ क्या करना है, तो यह आपके किसी भी प्रकार के तर्क में मदद करेगा। यदि आप उस डेटा के साथ कुछ भी करना चाहते हैं तो चयनित इंडेक्स का नाम और मूल्य जानना अति महत्वपूर्ण है।
जब आप बैकएंड का अध्ययन करेंगे तो आप इस बारे में अधिक अध्ययन करेंगे कि फ़ॉर्म डेटा के साथ क्या करना है - दस्तावेज़ के निचले भाग में जावास्क्रिप्ट के साथ क्या हो रहा है, इसके बारे में चिंता न करें। केवल इस बात की चिंता करें कि पृष्ठ पर ड्रॉपडाउन प्राप्त करने के लिए क्या करना चाहिए - <select> और <option> तत्व
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
निष्कर्ष
इस लेख में हमने सीखा कि फ़ॉर्म के लिए ड्रॉपडाउन मेनू कैसे बनाया जाता है। <select> का प्रयोग करें और <option> आपके उपयोगकर्ताओं को एकाधिक विकल्पों में से चयन करने का तरीका प्रदान करने के लिए तत्व। एक बार जब आप यहां मूल बातें समझ लेते हैं, तो देखें कि <optgroup> करता है!