এইচটিএমএল ড্রপডাউন লিস্ট ( HTML Drop down list)

 




ড্রপডাউন লিস্ট এর মাধ্যমে আপনি ইউজারের জন্য এমন একটা তালিকা তৈরী করতে পারবেন যেখান থেকে ইউজার যেকোন একটা সিলেক্ট করে দিতে পারবে।ধরুন আপনাকে একটা ফর্ম তৈরী করতে বলা হল এবং এখানে একজনের প্রিয় রং কি সেটা যাতে সিলেক্ট করে দিতে পারে (অনেকগুলি রং এর মধ্যে) এমন একটি অপশন রাখতে হবে,তখন ড্রপডাউন লিস্টের মাধ্যমে সেটা সহজেই করতে পারেন।


ড্রপডাউন লিস্ট তৈরী করতে প্রথমে <select> ট্যাগ দিয়ে কোড শুরু করতে হবে এরপর যে আইটেমগুলি থেকে ইউজার বাছাই করবে সেগুলির প্রতিটি <option> ট্যাগের মধ্যে রাখতে হবে।যেমন

1.<select name="color">
2.<option  value="bl">Black</option>
3.<option value="wh">White</option>
4.<option selected="selected" value="mr">Maroon</option>
5.</select>

প্রদর্শন:ড্রপডাউন লিস্ট


উপরের উদাহরনে দেখুন selected এট্রিবিউটের কারনে প্রথম অপশন Maroon দেখাচ্ছে আপনি যদি চান White প্রথমে দেখাক তাহলে ৩ নম্বর লাইনে selected এট্রিবিউট ব্যবহার করবেন।

প্রতিটি <option> ট্যাগে value এট্রিবিউট আছে এটা খুব গুরত্বপূর্ন যখন ফর্মের ডেটা সার্ভারে পাঠাবেন।value এট্রিবিউটের নাম ধরে (যেমন bl,mr..) কল করতে হয়।


<select> ট্যাগের size এট্রিবিউট

<select> ট্যাগে size এট্রিবিউট দিয়ে আপনি ঠিক করে দিতে পারেন যে লিস্টে কয়টি আইটেম দেখাবে যেমন উপরের উদাহরনেই যদি size=2 দেন তাহলে দুটি অপশন দেখাবে বাকিটা স্ক্রল করে দেখতে হবে।

01.<select name="color" size=2>
02. 
03.<option value="bl">Black</option>
04. 
05.<option value="wh">White</option>
06. 
07.<option selected="selected" value="mr">Maroon</option>
08. 
09.</select>

প্রদর্শন: <select> ট্যাগের size এট্রিবিউট


<select> ট্যাগের multiple এট্রিবিউট

multiple এর মাধ্যমে আপনি একের অধিক বিষয়  সিলেক্ট করার সুযোগ দিতে পারেন।

01.<select multiple="yes">
02. 
03.<option value="bl">Black</option>
04. 
05.<option value="wh">White</option>
06. 
07.<option selected="selected" value="mr">Maroon</option>
08. 
09.</select>


প্রদর্শন: <select> ট্যাগের multiple এট্রিবিউট


*৭ নম্বর লাইনে যদি selected এট্রিবিউট উঠিয়ে দেন তাহলে কোন অপশন আর সিলেক্টেড দেখাবেনা।


আপনার অপশন লিস্ট যদি অনেক বড় হয় তাহলে গ্রুপ করতে পারেন।<optgroup> এলিমেন্ট দিয়ে এটা করা যায়। যেমন

01.<select name="selInformation" >
02.<optgroup label="Tutorials" >
03.<option value="html"> HTML Tutorial </option>
04.<option value="css"> CSS Tutorials </option>
05.<option value="javascript"> JavaScript </option>
06.</optgroup>
07.<optgroup label="PHP Tutorials" >
08.<option value="basicphp"> Basic PHP </option>
09.<option value="advancedphp"> Advanced PHP </option>
10.</optgroup >
11.<optgroup label="Database Tutorials">
12.<option value="sql"> SQL Tutorial </option>
13.<option value="phpdatabase"> PHP Database </option>
14.</optgroup>
15.</select>

প্রদর্শন:

Post a Comment

Cookie Consent
Little Blog serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the data/wifi internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.