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

Fieldset and Legend Groups تجميع الحقول بوسم fieldset

صمّم تخطيطات النماذج المتجاوبة في بوتستراب 5 عبر أدوات الشبكة القياسية لبناء النماذج العمودية والشبكية متعددة الأعمدة والأفقية والسطرية ومجموعات fieldset.
5 صفوف تعليمية
بوتستراب 5
0 مشاهدة

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

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

عندما تضم الصفحة مجموعة من أزرار الراديو أو حقول عنوان فرعية تشترك في سؤال واحد، فإن التغليف الدلالي القياسي في HTML هو وسم <fieldset> المزود بعنوان <legend>. في النماذج الأفقية، امنح <fieldset class="row mb-3"> وامنح عنوانه <legend class="col-form-label col-sm-3 pt-0"> ليصطف تماماً مع بقية تسميات النموذج.

ومن المزايا العملية الكبرى لوسم <fieldset disabled> أنه يعطّل دفعة واحدة جميع الحقول والقوائم والأزرار الواقعة بداخله بسمة واحدة فقط دون تكرار disabled على كل عنصر!

الصف 2 كود برمجي
HTML 
<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>
جرّب بنفسك
الصف 3 شرح توضيحي

يلخص الجدول المرجعي التالي كافة أنماط وكلاسات تخطيط النماذج في Bootstrap 5.3:

نمط التخطيط أو الكلاسالتركيب القياسيحالة الاستخدام المثلى
النموذج العمودي .mb-3تسمية .form-label فوق حقل بعرض كاملنماذج تسجيل الدخول والتواصل السريع أحادية المسار البصري
الشبكي .row.g-3أعمدة .col-md-* و.col-12نماذج الشحن والفوترة متعددة الحقول المتجاوبة
الأفقي .col-form-labellabel.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تجميع أزرار الراديو دلالياً أو تعطيل قسم كامل بسمة واحدة
الصف 4 ملاحظة هامة
الصف 5 شرح توضيحي
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

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

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

أتقنت في هذا الدرس تخطيط النماذج العمودية والشبكية متعددة الأعمدة عبر .row.g-3، والنماذج الأفقية بكلاس .col-form-label وأحجامه، والنماذج السطرية المتجاوبة، والتجميع الدلالي عبر <fieldset> و<legend>. الخطوة التالية: انتقل الآن إلى الدرس الختامي للموديول السادس «التحقق من صحة النماذج في بوتستراب 5» لتأمين تجربة إدخال واضحة تربط فحص المتصفح بتحقق الخادم.

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