আমরা যখন HTML সম্বন্ধে আমাদের জ্ঞানকে প্রসারিত করি, তখন অনেক বিষয়ের মধ্যে একটি যা আমাদের বিবেচনা করা শুরু করতে হবে তা হল আমরা যা তৈরি করি তা আমাদের পৃষ্ঠা ব্যবহারকারী ব্যক্তিদের অভিজ্ঞতাকে কীভাবে প্রভাবিত করবে৷ একটি ওয়েব পৃষ্ঠার সংগঠন কিভাবে অভিজ্ঞতা পরিবর্তন করবে তা আমাদের দেখতে হবে। একটি পৃষ্ঠা যা খুব বিশৃঙ্খল তা অবশ্যই প্রভাবিত করবে যে ক্লায়েন্টরা পৃষ্ঠায় থাকার সিদ্ধান্ত নেয় কিনা এবং সাইটে থাকাকালীন তারা যা করতে চেয়েছিল তা সম্পূর্ণ করে।
আমাদের সাইটে ফর্মগুলি সংগঠিত করার একটি উপায় হল রেডিও বোতাম ইনপুট বা চেকবক্সগুলিকে তার নিজস্ব ড্রপডাউনে নেস্ট করা যাতে একজন ব্যবহারকারী একটি বিকল্প খুঁজে পেতে একটি তালিকার মাধ্যমে স্ক্রোল করতে পারে৷
এই নিবন্ধে, আমরা শিখব কিভাবে 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> দেখুন করে!
