شرح صفوف ومحتوى الفقرة
توفر التسميات العائمة .form-floating في Bootstrap 5 تصميماً عصرياً مدمجاً يجمع بين نظافة الحقل المختصر وبقاء اسم الحقل مرئياً دائماً أمام عين المستخدم؛ ففي الحالة الفارغة تستقر التسمية داخل الحقل بحجم طبيعي، وبمجرد نقر المستخدم للكتابة أو وجود قيمة مسبقة ترتفع التسمية للأعلى بحجم مصغر 0.85 تاركةً المساحة السفلية للنص المكتوب.
أجمل ما يميز هذا المكوّن أنه يعمل بلغة CSS الخالصة بنسبة مئة بالمئة دون أي مستمعات أحداث في JavaScript، اعتماداً على الحالة الزائفة القياسية :placeholder-shown.
HTML
<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>