optgroup in HTML

النهاردة هنتكلم عن تاج HTML مفيد أوي اسمه <optgroup>.

إيه هو <optgroup> وبيستخدم فين؟

• التاج ده بنستخدمه جوه الـ select، اللي هو بيعمل القايمة المنسدلة (drop-down list).
• فايدته الأساسية إنه بيخلينا نقسم وننظم الاختيارات (<option> elements) اللي جوه القايمة دي لمجموعات ليها معنى أو علاقة ببعض.

ليه بنحتاج نقسم الاختيارات؟ (مثال توضيحي)

تخيل كده عندك <select> بتخلي اليوزر يختار منها وجبة من منيو مطعم. لو المنيو كبير وفيه مقبلات وأطباق رئيسية وحلويات ومشروبات، وحطيت كل ده تحت بعضه في القايمة، هتبقى قايمة طويلة وصعبة لليوزر إنه يلاقي اللي هو عايزه بسرعة.

هنا يجي دور الـ <optgroup>:

• تقدر تعمل <optgroup> للمقبلات وتحط جواه الـ <option> بتاعة الشوربة والسلطات.
• وتعمل <optgroup> تاني للأطباق الرئيسية وتحط جواه اللحوم والفراخ والسمك.
• وتالت للحلويات، ورابع للمشروبات… وهكذا.

النتيجة: القايمة بتبقى متقسمة ومنظمة، وكل قسم ليه عنوان واضح، واليوزر يقدر يوصل للاختيار بتاعه بسهولة أكبر.

إزاي بنستخدم <optgroup>؟ (الكود)

الموضوع بسيط جدًا:

1. بنحط الـ <optgroup> تاج جوه الـ <select> تاج.
2. بندي للـ <optgroup> ده label attribute. القيمة اللي بنكتبها في الـ label هي اسم المجموعة اللي هيظهر لليوزر في القايمة المنسدلة (زي “المقبلات” أو “الأطباق الرئيسية” في المثال بتاعنا).
3. بنحط كل الـ <option> تاجات اللي تبع المجموعة دي جوه الـ <optgroup> بتاعها.

مثال بالكود:

 <label for="menu-items">اختار من المنيو:</label>
 <select id="menu-items" name="menu_item">
 
    <optgroup label="مقبلات - Appetizers">
        <option value="soup">شوربة عدس</option>
        <option value="salad">سلطة خضراء</option>
        <option value="hummus">حمص</option>
    </optgroup>
 
    <optgroup label="أطباق رئيسية - Main Courses">
        <option value="grilled_chicken">فراخ مشوية</option>
        <option value="kebab">كباب</option>
        <option value="fish">سمك فيليه</option>
    </optgroup>
 
    <optgroup label="حلويات - Desserts">
        <option value="om_ali">أم علي</option>
        <option value="kunafa">كنافة</option>
    </optgroup>
 
    <optgroup label="مشروبات - Beverages" disabled> <!-- مثال لمجموعة معطلة -->
        <option value="tea">شاي</option>
        <option value="coffee">قهوة</option>
    </optgroup>
 
 </select>

في المثال ده:

• عملنا 4 مجموعات باستخدام <optgroup>.
• كل مجموعة ليها label بيوصفها (زي “مقبلات - Appetizers”).
• كل مجموعة جواها الـ <option> الخاصة بيها.
• لاحظ إننا ممكن كمان نعمل disable لمجموعة كاملة باستخدام disabled attribute على الـ <optgroup> (زي مجموعة المشروبات في المثال، دي هتظهر بس مش هينفع نختار منها).

شكلها بيبقى إزاي في الـ Browser؟

لما تفتح القايمة المنسدلة في الـ browser، هتلاقي:

• أسماء المجموعات (اللي حطيناها في الـ label) ظاهرة كعناوين، غالبًا بتكون مكتوبة بخط مختلف أو مش قابلة للاختيار.
• تحت كل عنوان مجموعة، هتلاقي الـ <option> الخاصة بيها مترتبة.

ده بيخلي القايمة شكلها منظم ومفهوم أكتر بكتير، خصوصًا لو فيها عدد كبير من الاختيارات.

فوايد استخدام <optgroup>:

• تنظيم وترتيب: بيقسم القوايم الطويلة لمجموعات منطقية.
• سهولة الاستخدام: بيساعد اليوزر يلاقي الاختيار اللي بيدور عليه بسرعة.
• تحسين المظهر: بيدي شكل احترافي ومنظم أكتر للـ drop-down list.
• تجربة مستخدم (User Experience) أفضل: بيخلي التعامل مع القوايم الكبيرة أسهل وأوضح.

الخلاصة

الـ <optgroup> هو تاج بسيط لكنه قوي جدًا لتنظيم وترتيب الاختيارات جوه القوايم المنسدلة <select>. استخدمه دايمًا لما يكون عندك عدد كبير من الـ <option> أو لما تكون عايز تقسم الاختيارات لمجموعات واضحة عشان تحسن تجربة المستخدم.