HTML-এ <optgroup> এলিমেন্ট ড্রপডাউন লিস্টে অপশনগুলো গ্রুপ করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, গ্রেজুয়েশন এবং পোস্টগ্রেজুয়েশন কোর্সগুলো একই ড্রপডাউনে আলাদা গ্রুপে দেখানো যায়।
অ্যাট্রিবিউটগুলো:
- disabled: সেই অপশন গ্রুপটি ডিজেবল করবে
- label: অপশন গ্রুপের জন্য একটি লেবেল (দেখানো নাম) নির্দেশ করে
উদাহরণ
<!DOCTYPE html> <html> <body> <h2>শিক্ষাগত যোগ্যতা</h2> <select> <optgroup label="গ্রেজুয়েশন"> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </optgroup> <optgroup label="পোস্টগ্রেজুয়েশন"> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </optgroup> </select> </body> </html>
উপরের উদাহরণে দুটি <optgroup> ব্যবহার করে ড্রপডাউন লিস্টে দুটি সেকশন তৈরি করা হয়েছে। label অ্যাট্রিবিউট গ্রুপের শিরোনাম হিসেবে দেখায়।
স্টাইলিং: optgroup সরাসরি CSS দিয়ে স্টাইল করা যায় না (ব্রাউজার সীমাবদ্ধতা)। label বোল্ড দেখায়। কাস্টম ড্রপডাউন লাইব্রেরি (Select2, Choices.js) ব্যবহার করলে ফুল কন্ট্রোল পাওয়া যায়।
