شرح العنصر (optgroup) في HTML

الشرح الشامل لعنصر <optgroup> في HTML

HTML

مقدمة عن عنصر <optgroup>

عنصر <optgroup> (اختصارًا لـ Option Group) يُستخدم لتجميع خيارات مرتبطة معًا داخل عنصر <select>، مما يُحسّن من تجربة المستخدم ويجعل القوائم المنسدلة أكثر تنظيمًا وسهولة في الاستخدام.

البنية الأساسية

<select>
  <optgroup label="اسم المجموعة">
    <option value="قيمة1">نص الخيار 1</option>
    <option value="قيمة2">نص الخيار 2</option>
  </optgroup>
</select>

السمات (Attributes) الرئيسية

السمات الأساسية:

• label (مطلوب): يحدد عنوان المجموعة الذي سيظهر في القائمة
• disabled: يعطل جميع الخيارات ضمن المجموعة إذا تم تعيينه

السمات العامة:

• class: تحديد فئة للتصميم
• id: معرف فريد للمجموعة
• title: نص تلميح يظهر عند تمرير المؤشر

أمثلة عملية

تجميع خيارات حسب الفئة

<select>
  <optgroup label="الفواكه">
    <option value="apple">تفاح</option>
    <option value="orange">برتقال</option>
  </optgroup>
  <optgroup label="الخضروات">
    <option value="carrot">جزر</option>
    <option value="tomato">طماطم</option>
  </optgroup>
</select>

مجموعة معطلة

<select>
  <optgroup label="متاحة">
    <option value="free">مجانية</option>
  </optgroup>
  <optgroup label="غير متاحة" disabled>
    <option value="premium">مميزة</option>
  </optgroup>
</select>

الاستخدام مع CSS

يمكن تنسيق <optgroup> باستخدام CSS:

optgroup {
  font-weight: bold;
  font-style: normal;
  color: #333;
}

optgroup option {
  font-weight: normal;
  padding-left: 20px;
}

أفضل الممارسات

• استخدم تسميات واضحة: اجعل عناوين المجموعات مختصرة ومعبرة
• قلل عدد المجموعات: لا تستخدم أكثر من 5-7 مجموعات في قائمة واحدة
• رتب الخيارات منطقيًا: ضع الخيارات الأكثر استخدامًا في الأعلى
• استخدم مع <label>: وفر تسمية واضحة لعنصر <select>
• تحسين إمكانية الوصول: أضف وصفًا باستخدام aria-label إذا لزم الأمر

التوافق مع المتصفحات

عنصر <optgroup> مدعوم في جميع المتصفحات الحديثة والقديمة، بما في ذلك:

Chrome

مدعوم بالكامل

Firefox

مدعوم بالكامل

Safari

مدعوم بالكامل

Edge

مدعوم بالكامل

Internet Explorer

منذ الإصدارات القديمة

Opera

مدعوم بالكامل

الاستخدام المتقدم

مع JavaScript:

// تعطيل مجموعة برمجيًا
document.querySelector('optgroup[label="غير متاحة"]').disabled = true;

// إضافة مجموعة جديدة
let newGroup = document.createElement('optgroup');
newGroup.label = "مجموعة جديدة";
newGroup.appendChild(new Option("خيار جديد", "new"));
document.querySelector('select').appendChild(newGroup);

مع مكتبات JavaScript:

// مثال مع jQuery
$('select').append(
  $('<optgroup>').attr('label', 'مجموعة جديدة').append(
    $('<option>').val('new1').text('خيار 1'),
    $('<option>').val('new2').text('خيار 2')
  )
);

الفروق المهمة

• لا يمكن تداخل <optgroup>: لا يمكن وضع <optgroup> داخل <optgroup> آخر
• لا يمكن تحديد <optgroup>: المستخدم لا يمكنه اختيار المجموعة نفسها
• التنسيق المحدود: بعض خصائص CSS لا تنطبق على <optgroup> في بعض المتصفحات

إمكانية الوصول (Accessibility)

لتحسين إمكانية الوصول:

• استخدم <label> مرتبط مع <select>
• أضف وصفًا باستخدام aria-describedby إذا لزم الأمر
• تأكد أن التجميل لا يؤثر على إمكانية الاستخدام

<label for="food-select">اختر صنفًا:</label>
<select id="food-select">
  <optgroup label="الفواكه" aria-label="مجموعة الفواكه">
    <option value="apple">تفاح</option>
  </optgroup>
</select>

حالات الاستخدام الشائعة

• تصنيف المنتجات: تجميع المنتجات حسب الفئة
• البلدان والمدن: تجميع المدن تحت دولها
• الإعدادات: تجميع خيارات الإعدادات المتشابهة
• التصنيفات العلمية: تجميع المصطلحات حسب التخصص

الخلاصة

عنصر <optgroup> هو أداة قوية لتحسين تنظيم وعرض الخيارات في القوائم المنسدلة. عند استخدامه بشكل صحيح، يمكنه:

• تحسين تجربة المستخدم
• جعل القوائم الطويلة أكثر قابلية للاستخدام
• توفير هيكلية واضحة للبيانات
• تحسين إمكانية الوصول للعناصر

تذكر أن <optgroup> هو عنصر للعرض فقط ولا يؤثر على القيمة المرسلة عند تقديم النموذج - حيث يتم إرسال قيمة <option> المحددة فقط.

كيف كان المقال؟