في هذا الدرس 6تصفّح المواضيع
بما أن جميع عناصر .form-control و.form-select تحمل افتراضياً خاصيتَي display: block وwidth: 100%، فإن الوضع الفطري لأي نموذج في Bootstrap 5 هو الترتيب العمودي المكدّس Stacked Layout حيث تعلو كل تسمية حقلها مباشرة، وتفصل بين كل وحدة والتي تليها أداة هامش سفلي مثل .mb-3.
تثبت دراسات تتبع حركة العين في هندسة الواجهات أن النماذج العمودية أحادية العمود تحقق أعلى معدل إتمام في صفحات تسجيل الدخول وإنشاء الحسابات السريعة لأن عين المستخدم تنحدر في مسار رأسي مستقيم واحد دون تشتت أفقي.
<form>
<div class="mb-3">
<label for="org" class="form-label">Team</label>
<input type="text" class="form-control" id="org">
</div>
<button type="submit" class="btn btn-primary">
Save
</button>
</form>في نماذج عناوين الشحن والفوترة الطويلة، يساعد توزيع الحقول المترابطة منطقياً في صف واحد (مثل الاسم الأول واسم العائلة، أو المدينة والمنطقة والرمز البريدي) على تقليص الطول الكلي للصفحة على الحواسيب المكتبية. لبناء هذا التخطيط، امنح وسم <form> أو حاويته الداخلية الكلاسين .row.g-3، ثم وزّع كل حقل داخل عمود متجاوب مثل .col-md-6 أو .col-md-4 أو .col-12.
<form class="row g-3">
<div class="col-md-6">
<label for="fn" class="form-label">First</label>
<input type="text" class="form-control" id="fn">
</div>
<div class="col-md-6">
<label for="ln" class="form-label">Last</label>
<input type="text" class="form-control" id="ln">
</div>
</form>في لوحات الإعدادات الإدارية العريضة، يُفضَّل غالباً وضع التسمية في عمود جانبي مقابل الحقل في نفس السطر الأفقي بدلاً من وضعها فوقه. لتحقيق ذلك في Bootstrap 5، أنشئ صفاً <div class="row mb-3">، وامنح عنصر <label> عموداً شبكياً مثل .col-sm-3 مع الكلاس الجوهري .col-form-label (بدلاً من .form-label)، ثم غلّف الحقل داخل <div class="col-sm-9">.
تكمن أهمية .col-form-label في إضافته حشواً علوياً وسفلياً مدروساً يطابق سمك إطار وحشو .form-control بحيث يتوسط نص التسمية ارتفاع الحقل المقابل بالملليمتر!
إذا كبّرت الحقل الأفقي بكلاس .form-control-lg أو صغّرته بكلاس .form-control-sm، فيجب مطابقة حجم التسمية المقابلة له باستخدام .col-form-label-lg أو .col-form-label-sm حتى لا تبدو التسمية مرتفعة أو منخفضة عن خط الأساس النصي للحقل.
<div class="row mb-3">
<label for="hSm" class="col-sm-3 col-form-label
col-form-label-sm">Small</label>
<div class="col-sm-9">
<input type="email" class="form-control form-control-sm"
id="hSm">
</div>
</div>لإنشاء شريط تصفية أو اشتراك بريدي أفقي رشيق يأخذ كل عنصر فيه قدر محتواه فقط (بديلاً عن كلاس السطر القديم الملغى)، ندمج الكلاسات row row-cols-lg-auto g-3 align-items-center على عنصر <form>، ونضع كل أداة داخل .col-12 بحيث تنفرد بعرض كامل على الهاتف وتتراص تلقائياً بجانب بعضها على الشاشات الكبيرة. ولا تنسَ إبقاء التسميات موجودة بكلاس .visually-hidden حفاظاً على إمكانية الوصول.
قارن التخطيطات الأربعة مباشرة في المحاكي التفاعلي التالي:
عندما تضم الصفحة مجموعة من أزرار الراديو أو حقول عنوان فرعية تشترك في سؤال واحد، فإن التغليف الدلالي القياسي في HTML هو وسم <fieldset> المزود بعنوان <legend>. في النماذج الأفقية، امنح <fieldset class="row mb-3"> وامنح عنوانه <legend class="col-form-label col-sm-3 pt-0"> ليصطف تماماً مع بقية تسميات النموذج.
ومن المزايا العملية الكبرى لوسم <fieldset disabled> أنه يعطّل دفعة واحدة جميع الحقول والقوائم والأزرار الواقعة بداخله بسمة واحدة فقط دون تكرار disabled على كل عنصر!
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-3 pt-0">Plan</legend>
<div class="col-sm-9">
<div class="form-check">
<input class="form-check-input" type="radio"
name="p" id="p1" checked>
<label class="form-check-label" for="p1">Pro</label>
</div>
</div>
</fieldset>يلخص الجدول المرجعي التالي كافة أنماط وكلاسات تخطيط النماذج في Bootstrap 5.3:
| نمط التخطيط أو الكلاس | التركيب القياسي | حالة الاستخدام المثلى |
|---|---|---|
النموذج العمودي .mb-3 | تسمية .form-label فوق حقل بعرض كامل | نماذج تسجيل الدخول والتواصل السريع أحادية المسار البصري |
الشبكي .row.g-3 | أعمدة .col-md-* و.col-12 | نماذج الشحن والفوترة متعددة الحقول المتجاوبة |
الأفقي .col-form-label | label.col-sm-3 + div.col-sm-9 | لوحات إعدادات الحسابات والأنظمة الإدارية العريضة |
.col-form-label-sm / lg | مع .col-form-label | مزامنة محاذاة خط التسمية مع الحقول المصغرة أو المكبرة |
السطري .row-cols-lg-auto | مع .g-3.align-items-center | أشرطة الفرز والبحث المدمجة مع تسميات .visually-hidden |
<fieldset> + <legend> | حاوية دلالية تقبل سمة disabled | تجميع أزرار الراديو دلالياً أو تعطيل قسم كامل بسمة واحدة |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس تخطيط النماذج العمودية والشبكية متعددة الأعمدة عبر .row.g-3، والنماذج الأفقية بكلاس .col-form-label وأحجامه، والنماذج السطرية المتجاوبة، والتجميع الدلالي عبر <fieldset> و<legend>. الخطوة التالية: انتقل الآن إلى الدرس الختامي للموديول السادس «التحقق من صحة النماذج في بوتستراب 5» لتأمين تجربة إدخال واضحة تربط فحص المتصفح بتحقق الخادم.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Horizontal Column Form Label تسمية العمود الأفقي
- كلاس يضيف حشواً رأسياً دقيقاً لعنصر <label> داخل الشبكة ليتوسط ارتفاع حقل الإدخال المجاور له.
- للمراجعة
- 02 Gutter-Driven Form Grid شبكة النموذج المحكومة بالفجوات
- استخدام .row.g-3 على النموذج لضبط المسافات الأفقية والرأسية بين الحقول تلقائياً عبر نظام الشبكة.
- للمراجعة
- 03 Auto-Sizing Inline Form النموذج السطري التلقائي العرض
- دمج .row-cols-lg-auto مع .align-items-center لصف الحقول أفقياً بحجم محتواها على الحاسوب وطيّها عمودياً على الهاتف.
- للمراجعة
- 04 Fieldset Group Container حاوية تجميع الحقول الدلالية
- وسم HTML قياسي يُقرن بوسم <legend> لربط مجموعة خيارات دلالياً أو تعطيل كافة حقوله دفعة واحدة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- أوراق الأنماط المتتالية — تشغّل صفوف الشبكة المرنة ومتغيرات الفجوات الأفقية والرأسية في نماذج بوتستراب 5.
- للمراجعة
- 02 WCAG WCAG
- Web Content Accessibility Guidelines
- إرشادات إتاحة محتوى الويب — تشترط الاحتفاظ بتسميات .visually-hidden في النماذج السطرية وعناوين <legend> لمجموعات الراديو.
- للمراجعة
- 03 UX UX
- User Experience
- تجربة المستخدم — توجّه لاختيار التخطيط العمودي لسرعة التسجيل والشبكي متعدد الأعمدة لنماذج العناوين الكثيفة.
- للمراجعة
- 04 RTL RTL
- Right-to-Left
- الاتجاه من اليمين إلى اليسار — يرتب عمود التسمية تلقائياً في جهة اليمين وعمود الحقل في جهة اليسار في النماذج الأفقية العربية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
صمّم نموذجاً بكلاس row g-3 يضم حقلَي اسم بعرض .col-md-6، وحقل عنوان .col-12، وصفاً ثلاثياً للمدينة والدولة والرمز البريدي.
-
أنشئ صفين أفقيين باستخدام .col-sm-3.col-form-label و.col-sm-9، يليهما وسم <fieldset class="row mb-3"> بعنوان <legend> محاذٍ.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.