انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #5 من درس: قوائم الاختيار المنسدلة في بوتستراب 5

Accessible Select Labels تسميات وإتاحة قوائم الاختيار

نسّق قوائم الاختيار المنسدلة عبر المتصفحات في بوتستراب 5 باستخدام كلاس form-select وأحجامه المختلفة، وفعّل الاختيار المتعدد وحالات التعطيل والتسميات الدلالية المتاحة.
5 صفوف تعليمية
بوتستراب 5
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

لكي تجتاز قوائم الاختيار معايير إمكانية الوصول العالمية، يجب أن ترتبط كل قائمة اختيار باسم دلالي واضح: ففي النماذج العادية نربطها بعنصر <label class="form-label"> مرئي عبر السمتين for وid، أما في أشرطة الفرز المدمجة التي يغيب عنها نص التسمية المرئي فنضيف السمة aria-label مباشرة إلى وسم <select>.

كما يمكنك تنظيم القوائم الطويلة منطقياً باستخدام وسم التجميع القياسي <optgroup label="..."> الذي يحافظ على تنسيقه النظيف داخل .form-select ويسهّل على قارئات الشاشة إعلان اسم المجموعة الفرعية قبل كل خيار.

الصف 2 كود برمجي
HTML 
<label for="db" class="form-label">Database Engine</label>
<select class="form-select" id="db">
  <optgroup label="Relational SQL">
    <option value="mysql">MySQL 8</option>
    <option value="pgsql">PostgreSQL 16</option>
  </optgroup>
  <optgroup label="Document &amp; Cache">
    <option value="redis">Redis</option>
  </optgroup>
</select>
جرّب بنفسك
الصف 3 شرح توضيحي

يستعرض الجدول المرجعي التالي كافة كلاسات وسمات قوائم الاختيار في Bootstrap 5.3:

الكلاس أو السمةموضع الاستخدامالأثر البصري والوظيفي
.form-selectعنصر <select>توحيد إطار القائمة وحشوها وإضافة سهم SVG متكيف مع اتجاه الصفحة
.form-select-lgعنصر <select>تكبير حجم الخط والارتفاع ليطابق حقول .form-control-lg
.form-select-smعنصر <select>تصغير أبعاد القائمة لأشرطة التصفية والجداول المضغوطة
multipleعنصر <select>تفعيل تحديد عدة خيارات معاً وإخفاء سهم القائمة المنسدلة تلقائياً
size="N"عنصر <select>عرض عدد N من السطور المرئية المفتوحة داخل صندوق التمرير
disabled<select> أو <option>تعطيل القائمة كاملة أو منع إعادة اختيار خيار الإرشاد الافتراضي الأول
الصف 4 ملاحظة هامة
الصف 5 شرح توضيحي
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

أتقنت في هذا الدرس توحيد مظهر قوائم الاختيار عبر كلاس .form-select بديلاً عن الكلاسات القديمة، وضبط أحجامها، وتفعيل الاختيار المتعدد والصفوف المرئية، وإدارة التعطيل الكلي والجزئي والتسميات الدلالية مع مجموعات <optgroup>. الخطوة التالية: انتقل الآن إلى درس «مربعات الاختيار والمفاتيح في بوتستراب 5» لبناء خيارات التحديد وأزرار الراديو والمفاتيح المنزلقة العصرية.

جميع فقرات هذا الدرس (قوائم الاختيار المنسدلة في بوتستراب 5)