ড্রপডাউন
লিস্ট এর মাধ্যমে আপনি ইউজারের জন্য এমন একটা তালিকা তৈরী করতে পারবেন
যেখান থেকে ইউজার যেকোন একটা সিলেক্ট করে দিতে পারবে।ধরুন আপনাকে একটা
ফর্ম তৈরী করতে বলা হল এবং এখানে একজনের প্রিয় রং কি সেটা যাতে সিলেক্ট
করে দিতে পারে (অনেকগুলি রং এর মধ্যে) এমন একটি অপশন রাখতে হবে,তখন
ড্রপডাউন লিস্টের মাধ্যমে সেটা সহজেই করতে পারেন।
ড্রপডাউন লিস্ট তৈরী করতে প্রথমে <select> ট্যাগ দিয়ে কোড শুরু করতে হবে এরপর যে আইটেমগুলি থেকে ইউজার বাছাই করবে সেগুলির প্রতিটি <option> ট্যাগের মধ্যে রাখতে হবে।যেমন
প্রদর্শন:ড্রপডাউন লিস্ট
ড্রপডাউন লিস্ট তৈরী করতে প্রথমে <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> ট্যাগের 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>
0 মন্তব্য(গুলি):
Post a Comment