إطار Bootstrap 5
مكونات النماذج
مقدمة إلى مكونات النماذج
توفر Bootstrap 5 مكونات نماذج متخصصة تتجاوز المدخلات الأساسية. تتضمن هذه المكونات خانات الاختيار وأزرار الراديو والمفاتيح (جديدة في Bootstrap 5) ومدخلات النطاق ومجموعات الإدخال المتقدمة. يساعدك فهم هذه المكونات على إنشاء نماذج غنية وتفاعلية.
ملاحظة: أعادت Bootstrap 5 تصميم تنسيق خانات الاختيار وأزرار الراديو بالكامل مع تحسين إمكانية الوصول ومكون مفتاح جديد.
خانات الاختيار وأزرار الراديو
توفر Bootstrap تنسيقًا مخصصًا لخانات الاختيار وأزرار الراديو باستخدام فئات form-check:
<!-- خانة اختيار افتراضية -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
خانة اختيار افتراضية
</label>
</div>
<!-- خانة اختيار محددة -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
خانة اختيار محددة
</label>
</div>
<!-- خانة اختيار معطلة -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
خانة اختيار معطلة
</label>
</div>
<!-- راديو افتراضي -->
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
راديو افتراضي
</label>
</div>
<!-- راديو محدد -->
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
راديو محدد افتراضيًا
</label>
</div>
<!-- راديو معطل -->
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
راديو معطل
</label>
</div>
نصيحة: استخدم دائمًا سمات
id فريدة لخانات الاختيار وأزرار الراديو، وطابقها مع سمة for في التسميات لإمكانية الوصول.
خانات الاختيار وأزرار الراديو المضمنة
اجمع خانات الاختيار أو أزرار الراديو على نفس الصف الأفقي باستخدام form-check-inline:
<!-- خانات اختيار مضمنة -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (معطل)</label>
</div>
<!-- أزرار راديو مضمنة -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (معطل)</label>
</div>
المفاتيح (جديدة في Bootstrap 5)
أنشئ مفاتيح تبديل باستخدام فئة form-switch، وهي بديل حديث لخانات الاختيار:
<!-- مفتاح افتراضي -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">مدخل مفتاح خانة اختيار افتراضي</label>
</div>
<!-- مفتاح محدد -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">مدخل مفتاح خانة اختيار محدد</label>
</div>
<!-- مفتاح معطل -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">مدخل مفتاح خانة اختيار معطل</label>
</div>
<!-- مفتاح محدد معطل -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">مفتاح محدد معطل</label>
</div>
ميزة Bootstrap 5: المفاتيح هي مكون جديد في Bootstrap 5، مثالي للتبديل بين التشغيل/الإيقاف وواجهات الإعدادات. قم دائمًا بتضمين
role="switch" لإمكانية الوصول.
خانات الاختيار/الراديو بدون تسميات
أنشئ خانات اختيار وأزرار راديو بدون تسميات مرئية باستخدام form-check بدون form-check-label:
<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>
<div>
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>
تحذير: عند حذف التسميات المرئية، قدم دائمًا سمات
aria-label لقارئات الشاشة للحفاظ على إمكانية الوصول.
مدخلات النطاق
توفر Bootstrap 5 تنسيقًا مخصصًا لمدخلات النطاق:
<!-- نطاق افتراضي -->
<label for="customRange1" class="form-label">مثال على النطاق</label>
<input type="range" class="form-range" id="customRange1">
<!-- نطاق مع الحد الأدنى والأقصى -->
<label for="customRange2" class="form-label">مثال على النطاق مع الحد الأدنى والأقصى</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">
<!-- نطاق مع خطوات -->
<label for="customRange3" class="form-label">مثال على النطاق مع الخطوات</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
<!-- نطاق معطل -->
<label for="disabledRange" class="form-label">نطاق معطل</label>
<input type="range" class="form-range" id="disabledRange" disabled>
نصيحة: استخدم سمات
min وmax وstep للتحكم في سلوك إدخال النطاق. فكر في عرض القيمة الحالية باستخدام JavaScript لتجربة مستخدم أفضل.
مجموعات الإدخال مع الأزرار
ادمج مجموعات الإدخال مع الأزرار للحصول على وظائف محسّنة:
<!-- زر قبل الإدخال -->
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">زر</button>
<input type="text" class="form-control" placeholder="" aria-label="مثال نص مع زر إضافي">
</div>
<!-- زر بعد الإدخال -->
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="اسم مستخدم المستلم">
<button class="btn btn-outline-secondary" type="button">زر</button>
</div>
<!-- أزرار متعددة -->
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">زر</button>
<button class="btn btn-outline-secondary" type="button">زر</button>
<input type="text" class="form-control" placeholder="">
</div>
<!-- زر مع قائمة منسدلة -->
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="بحث">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">قائمة منسدلة</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">إجراء</a></li>
<li><a class="dropdown-item" href="#">إجراء آخر</a></li>
<li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
</ul>
</div>
<!-- زر مقسم -->
<div class="input-group mb-3">
<input type="text" class="form-control">
<button type="button" class="btn btn-outline-secondary">إجراء</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
<span class="visually-hidden">تبديل القائمة المنسدلة</span>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">إجراء</a></li>
<li><a class="dropdown-item" href="#">إجراء آخر</a></li>
</ul>
</div>
مجموعات الإدخال مع خانات الاختيار وأزرار الراديو
ضع خانات الاختيار أو أزرار الراديو داخل مجموعات الإدخال:
<!-- مجموعة إدخال مع خانة اختيار -->
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox" value="" aria-label="خانة اختيار لإدخال النص التالي">
</div>
<input type="text" class="form-control" aria-label="إدخال نص مع خانة اختيار">
</div>
<!-- مجموعة إدخال مع راديو -->
<div class="input-group">
<div class="input-group-text">
<input class="form-check-input mt-0" type="radio" value="" aria-label="زر راديو لإدخال النص التالي">
</div>
<input type="text" class="form-control" aria-label="إدخال نص مع زر راديو">
</div>
مدخلات الملفات
توفر Bootstrap تنسيقًا مخصصًا لمدخلات الملفات:
<!-- إدخال ملف افتراضي -->
<div class="mb-3">
<label for="formFile" class="form-label">مثال على إدخال ملف افتراضي</label>
<input class="form-control" type="file" id="formFile">
</div>
<!-- ملفات متعددة -->
<div class="mb-3">
<label for="formFileMultiple" class="form-label">مثال على إدخال ملفات متعددة</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<!-- إدخال ملف معطل -->
<div class="mb-3">
<label for="formFileDisabled" class="form-label">مثال على إدخال ملف معطل</label>
<input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<!-- إدخال ملف صغير -->
<div class="mb-3">
<label for="formFileSm" class="form-label">مثال على إدخال ملف صغير</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<!-- إدخال ملف كبير -->
<div>
<label for="formFileLg" class="form-label">مثال على إدخال ملف كبير</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>
<!-- إدخال ملف مع سمة accept -->
<div class="mb-3">
<label for="formFileImages" class="form-label">الصور فقط</label>
<input class="form-control" type="file" id="formFileImages" accept="image/*">
</div>
نصيحة: استخدم سمة
accept لتحديد أنواع الملفات. استخدم multiple للسماح بتحديد ملفات متعددة.
تمرين: إنشاء نموذج استطلاع
أنشئ نموذج استطلاع كامل باستخدام مكونات نماذج متنوعة:
- القسم 1: التفضيلات الشخصية
- مجموعة راديو لـ "كيف سمعت عنا؟" (3+ خيارات)
- مجموعة خانات اختيار لـ "ما هي الخدمات التي تهتم بها؟" (5+ خيارات، السماح بمتعدد)
- القسم 2: تقييم التجربة
- شريط تمرير نطاق لـ "الرضا العام" (0-10)
- شريط تمرير نطاق لـ "هل ستوصي بنا؟" (0-10)
- القسم 3: الإعدادات
- مفتاح لـ "الاشتراك في النشرة الإخبارية"
- مفتاح لـ "تمكين الإشعارات"
- مفتاح لـ "جعل الملف الشخصي عامًا"
- القسم 4: معلومات إضافية
- تحميل ملف لـ "تحميل سيرتك الذاتية" (قبول PDF/DOC فقط)
- مجموعة إدخال مع قائمة منسدلة لـ "وقت الاتصال المفضل"
- أضف تسميات وتباعدًا وتجميعًا مناسبًا
- ضمّن زر إرسال في النهاية
أفضل الممارسات
- قدم دائمًا تسميات لمكونات النموذج، حتى لو كانت مخفية بصريًا
- استخدم المفاتيح لإعدادات التشغيل/الإيقاف الثنائية، وخانات الاختيار للاختيارات المتعددة
- اجمع خانات الاختيار وأزرار الراديو ذات الصلة بشكل منطقي
- استخدم
aria-labelعندما لا تكون التسميات مرئية - قدم تعليمات واضحة لتحميل الملفات (التنسيقات المقبولة، حدود الحجم)
- فكر في خانات الاختيار/الراديو المضمنة للقوائم القصيرة (3-5 عناصر)
- استخدم مدخلات النطاق للقيم الرقمية مع حدود دنيا/قصوى واضحة
- اعرض القيمة الحالية لمدخلات النطاق عندما يكون ذلك ممكنًا
- اختبر جميع مكونات النموذج باستخدام التنقل بلوحة المفاتيح
- تأكد من التباعد والمحاذاة المناسبين للحصول على تسلسل هرمي مرئي أفضل
- استخدم ملاحظات التحقق مع جميع أنواع الإدخال
الخلاصة
في هذا الدرس، تعلمت عن مكونات نماذج Bootstrap بما في ذلك خانات الاختيار وأزرار الراديو والمفاتيح (جديدة في Bootstrap 5) ومدخلات النطاق ومجموعات الإدخال مع الأزرار ومدخلات الملفات. توفر هذه المكونات اللبنات الأساسية لإنشاء نماذج غنية وتفاعلية بتنسيق متسق وتجربة مستخدم ممتازة.