انتقل إلى محتوى الدرس

Input Before Label Rule شرط ترتيب الحقل قبل التسمية

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

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

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

لكي تعمل التسمية العائمة دون أخطاء، يجب الالتزام بشرطين تقنيين صارمين لا يقبلان التنازل:

  • أولاً — الحقل قبل التسمية: يجب كتابة عنصر <input class="form-control"> أولاً داخل .form-floating، ثم كتابة <label> بعده مباشرة (عكس النماذج التقليدية)، لأن CSS لا تستطيع استهداف عنصر سابق عبر محدد الأخ ~.
  • ثانياً — وجود سمة placeholder غير فارغة: يجب إضافة سمة placeholder="..." على كل حقل نصي، فلو حُذفت هذه السمة ستبقى التسمية عالقة في المنتصف فوق كتابة المستخدم!
الصف 2 صورة توضيحية
مخطط يوضح الشروط الثلاثة لعمل التسميات العائمة form-floating من ترتيب الحقل وسمة placeholder حتى حركة التصغير
الصف 3 ملاحظة هامة