في هذا الدرس 6تصفّح المواضيع
توفر التسميات العائمة .form-floating في Bootstrap 5 تصميماً عصرياً مدمجاً يجمع بين نظافة الحقل المختصر وبقاء اسم الحقل مرئياً دائماً أمام عين المستخدم؛ ففي الحالة الفارغة تستقر التسمية داخل الحقل بحجم طبيعي، وبمجرد نقر المستخدم للكتابة أو وجود قيمة مسبقة ترتفع التسمية للأعلى بحجم مصغر 0.85 تاركةً المساحة السفلية للنص المكتوب.
أجمل ما يميز هذا المكوّن أنه يعمل بلغة CSS الخالصة بنسبة مئة بالمئة دون أي مستمعات أحداث في JavaScript، اعتماداً على الحالة الزائفة القياسية :placeholder-shown.
<div class="form-floating mb-3">
<input type="email" class="form-control" id="flMail"
placeholder="[email protected]">
<label for="flMail">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="flPass"
placeholder="Password" value="secret123">
<label for="flPass">Password</label>
</div>لكي تعمل التسمية العائمة دون أخطاء، يجب الالتزام بشرطين تقنيين صارمين لا يقبلان التنازل:
- أولاً — الحقل قبل التسمية: يجب كتابة عنصر
<input class="form-control">أولاً داخل.form-floating، ثم كتابة<label>بعده مباشرة (عكس النماذج التقليدية)، لأن CSS لا تستطيع استهداف عنصر سابق عبر محدد الأخ~. - ثانياً — وجود سمة placeholder غير فارغة: يجب إضافة سمة
placeholder="..."على كل حقل نصي، فلو حُذفت هذه السمة ستبقى التسمية عالقة في المنتصف فوق كتابة المستخدم!
عند استخدام مربع نص متعدد الأسطر <textarea class="form-control"> داخل .form-floating، فإن ارتفاعه الافتراضي سيعادل ارتفاع سطر واحد فقط. لا تعتمد هنا على السمة التقليدية rows="4" لأن قواعد الارتفاع الثابت في الحاوية العائمة تتجاوزها؛ بل حدد ارتفاعاً صريحاً عبر CSS (مثل style="height: 110px").
<div class="form-floating">
<textarea class="form-control" id="flMsg"
placeholder="Leave a comment"
style="height: 110px"></textarea>
<label for="flMsg">Incident Summary</label>
</div>وسّع Bootstrap 5.3 قدرات التسميات العائمة لتشمل حالتين متقدمتين شائعتين في لوحات التحكم: استخدام .form-control-plaintext داخل .form-floating لعرض البيانات المقروءة بدون إطار مع احتفاظها بعنوانها العلوي الأنيق، وكذلك وضع حاوية .form-floating كاملة كابن مباشر داخل .input-group بجانب بادئة .input-group-text.
اختبر جميع حالات التسميات العائمة بنفسك في المختبر الحي التالي:
تبرع التسميات العائمة بشكل خاص عند وضعها داخل صفوف الشبكة المتراصة مثل <div class="row g-2">؛ فبما أن التسمية محتواة داخل ارتفاع الصندوق نفسه (3.5rem افتراضياً) في كل من الحقل النصي وقائمة الاختيار، يصطف العمودان أفقياً كشريط أنيق متساوي الارتفاع دون أي إزاحة رأسية.
<div class="input-group mb-2">
<span class="input-group-text">@</span>
<div class="form-floating">
<input type="text" class="form-control" id="uName"
placeholder="Username">
<label for="uName">Username</label>
</div>
</div>يلخص الجدول المرجعي التالي قواعد ومتطلبات التسميات العائمة في Bootstrap 5.3:
| العنصر أو الشرط | طريقة الكتابة الصحيحة | سبب الإلزام أو السلوك الناتج |
|---|---|---|
.form-floating | الحاوية الأب المباشرة | ضبط الموضع النسبي والارتفاع الموحد (3.5rem) للحقل وتسميته |
| ترتيب الوسوم | الحقل أولاً ثم <label> بعده | تمكين محدد الأخ في CSS من تحريك التسمية عند التركيز أو الامتلاء |
سمة placeholder | إلزامية على input وtextarea | تفعيل الكاشف :not(:placeholder-shown) لمعرفة وجود نص مكتوب |
ارتفاع <textarea> | عبر style="height: ..." وليس rows | لأن قواعد ارتفاع .form-floating تتجاهل سمة عدد الأسطر التقليدية |
قائمة .form-select | قائمة مفردة بدون multiple أو size | تستقر التسمية علوياً بشكل دائم فوق الخيار النشط |
الدمج مع .input-group | وضع .form-floating كابن داخل المجموعة | إلحاق بادئات أو أزرار مع بقاء التسمية العائمة فاعلة داخل الحقل |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس آلية عمل التسميات العائمة .form-floating بلغة CSS الخالصة، وقاعدة ترتيب الحقل قبل التسمية مع سمة placeholder الإلزامية، وضبط ارتفاع مربعات النص، وتنسيق قوائم الاختيار ومجموعات الإدخال والشبكة. الخطوة التالية: انتقل الآن إلى درس «تخطيط وتوزيع النماذج في بوتستراب 5» لبناء النماذج الشبكية المتعددة الأعمدة والنماذج الأفقية والسطرية.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Floating Label Wrapper حاوية التسمية العائمة
- حاوية في بوتستراب 5 تحرك عنصر التسمية للأعلى بحجم مصغر فور التركيز على الحقل أو كتابة قيمة بداخله.
- للمراجعة
- 02 Placeholder-Shown Pseudo-Class محدد إظهار التلميح في CSS
- محدد CSS قياسي يعتمد عليه .form-floating لمعرفة ما إذا كان الحقل فارغاً أم يحتوي على نص دون جافاسكريبت.
- للمراجعة
- 03 Input-Before-Label Order قاعدة سبق الحقل للتسمية
- وضع عنصر الحقل قبل وسم <label> في شجرة HTML ليتمكن محدد الأخ في CSS من التحكم بموضع التسمية.
- للمراجعة
- 04 Explicit Textarea Height الارتفاع الصريح لمربع النص
- تحديد خاصية height بلغة CSS بدلاً من سمة rows لتكبير مساحة مربع النص داخل الحاوية العائمة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- أوراق الأنماط المتتالية — تتولى تشغيل حركة التسميات العائمة بالكامل عبر التحويلات الهندسية دون الحاجة لجافاسكريبت.
- للمراجعة
- 02 DOM DOM
- Document Object Model
- نموذج كائن المستند — يشترط تقدم عقدة الحقل على عقدة التسمية الشقيقة داخل شجرة العناصر.
- للمراجعة
- 03 RTL RTL
- Right-to-Left
- الاتجاه من اليمين إلى اليسار — يضبط نقطة ارتكاز تصغير التسمية العائمة في أقصى اليمين العلوي تلقائياً في الواجهة العربية.
- للمراجعة
- 04 UX UX
- User Experience
- تجربة المستخدم — تحافظ على بقاء اسم الحقل مرئياً بعد الكتابة، بعكس نصوص placeholder العادية التي تختفي فور البدء بالكتابة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ حقلَي .form-floating للبريد الإلكتروني وكلمة المرور مع الالتزام بوضع الحقل قبل التسمية وإضافة سمة placeholder غير فارغة.
-
صمّم صفاً شبكياً .row.g-2 يجمع مجموعة إدخال ببادئة @ مع .form-floating وقائمة .form-select عائمة، يليهما مربع نص عائم بارتفاع 120px.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.