شرح صفوف ومحتوى الفقرة
يكتمل طقم الحقول الأساسية في Bootstrap 5 بدعم عنصرين أصيلين في HTML5 بكفاءة عالية: أولهما منتقي الألوان عبر إضافة الكلاس .form-control-color بجانب .form-control على حقل type="color" لضبط عرضه بشكل مربع متناسق مع بقاء سمة title مفيدة لإظهار تلميح اللون.
وثانيهما قوائم الاقتراحات الذكية <datalist> التي تُربط بالحقل عبر السمة list لتقدم للمستخدم إكمالاً تلقائياً فورياً أثناء الكتابة مع بقاء الحقل حراً لكتابة أي قيمة جديدة غير موجودة في القائمة.
<label for="clr" class="form-label">Accent Color</label>
<input type="color" id="clr" value="#6f42c1"
class="form-control form-control-color mb-3">
<label for="reg" class="form-label">Server Region</label>
<input class="form-control" list="regions" id="reg">
<datalist id="regions">
<option value="Riyadh">
<option value="Cairo">
</datalist>يجمع الجدول التالي كلاسات وسمات حقول الإدخال الأساسية المعتمدة في Bootstrap 5.3:
| الكلاس أو السمة | العنصر المستهدف | الدور الهندسي والسلوكي |
|---|---|---|
.form-label | <label> | ضبط الهامش السفلي وتنسيق خط تسمية الحقل المرتبطة بسمة for |
.form-control | <input> / <textarea> | منح الحقل عرضاً كاملاً وحدوداً موحدة وتنسيق حقول النص والملفات |
.form-text | <div> / <span> | عرض نص إرشادي مساعد أسفل الحقل يُربط عبر aria-describedby |
.form-control-lg / sm | حقل .form-control | تكبير أو تصغير ارتفاع الحقل وحجم خطه ليتطابق مع الأزرار المجاورة |
.form-control-plaintext | <input readonly> | إزالة الإطار والخلفية لعرض القيم الثابتة كنص مقروء متناسق المحاذاة |
.form-control-color | <input type="color"> | تحويل منتقي الألوان إلى مربع مدمج أنيق بعرض موحد عبر المتصفحات |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرفت في هذا الدرس على بنية الحقول الحديثة في بوتستراب 5 بدون الكلاسات الملغاة، وأتقنت ربط .form-label مع .form-control و.form-text، وضبط الأحجام، والتمييز بين disabled وreadonly و.form-control-plaintext، وتنسيق حقول الملفات ومنتقي الألوان وقوائم الاقتراحات. الخطوة التالية: انتقل الآن إلى درس «قوائم الاختيار المنسدلة في بوتستراب 5» لتنسيق عناصر الاختيار الثابتة والمتعددة بكلاس .form-select.