যেহেতু আমরা HTML-এর জ্ঞান প্রসারিত করছি, আমাদের जिनিসগুলো তৈরি করবে সেটি আমাদের পেজ ব্যবহার করার লোকদের অভিজ্ঞতাকে কীভাবে প্রভাবিত করবে সেটি বিবেচনা করা শুরু করতে হয়। আমাদের যেটি দেখতে হবে সেটি হল একটি ওয়েব পেজের организаিশন অভিজ্ঞতাকে কীভাবে পরিবর্তন করবে। একটি খুব ক্লাটার্ড পেজ নিশ্চিতভাবে প্রভাবিত করবে ক্লায়েন্টরা পেজে থাকতে চান কিনা এবং সাইটে থাকা সময় তাদের উদ্দেশ্য পুরা করতে পারেন কিনা।
আমাদের সাইটে ফর্মগুলোर्गানাইজ করার একটি উপায় হল রেডিও বাটন ইনপুট বা চেকবক্সগুলোকে তার নিজস্ব ড্রপডাউন-এ নেস্ট করা যাতে একজন ইউজার একটি লিস্ট স্ক্রল করে একটি অপশন খুঁজে পায়।
এই আর্টিকেলে, আমরা শিখব HTML কীভাবে লিভারেজ করতে হয় যাতে আমরা একটি <select> ড্রপডাউন তৈরি করতে পারি যা একটি ফর্ম এলিমেন্ট হিসেবে ব্যবহৃত হবে। আপনি যদি একটি ন্যাভবার ড্রপডাউন মেনু কীভাবে তৈরি করা হয় সেটি দেখতে চান, তবে CSS Dropdowns চেক আউট করুন।
বেসিক স্ট্রাকচার
একটি HTML ড্রপডাউন মেনুর বেসিক স্ট্রাকচার হল একটি <select> এলিমেন্ট যা গ্রুপিংকে নাম এবং আইডেন্টিফাই করে, এবং একাধিক <option> ট্যাগ যা আপনার ড্রপডাউন কন্টেন্ট বানায়।
শুরু করতে, চলুন সেই ড্রপডাউনটির কঙ্কাল তৈরি করি। <select> এলিমেন্ট লিখুন যার id এবং name “baseball-teams”। id আমাদের সাহায্য করবে যদি আমরা স্টাইলিং অ্যাডজাস্ট করতে চাই। name অ্যাট্রিবিউট আমাদের সাহায্য করবে যখন আমরা ফর্ম ডেটা ব্যবহার করতে চাইব একটি টিম সিলেক্ট হয়ে গেলে এবং সেটি সার্ভারে সাবমিট করতে চাইব।
<!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> এলিমেন্ট।
উপসংহার
এই আর্টিকেলে আমরা ফর্মের জন্য ড্রপডাউন মেনু তৈরি করার পদ্ধতি শিখেছি। আপনার ইউজারদের একাধিক অপশন থেকে একটি সিলেকশন করার উপায় দিতে <select> এবং <option> এলিমেন্ট ব্যবহার করুন। একবার বেসিক্সে হাত পাওয়া যাক, <optgroup> কী করে সেটি লুক ইন করুন!
