في هذا الدرس 6تصفّح المواضيع
شهدت نماذج الإدخال في Bootstrap 5 عملية تبسيط معمارية شاملة؛ إذ استغنى الإطار نهائياً عن الكلاس القديم form-group الذي كان يفرض هامشاً سفلياً ثابتاً في الإصدار الرابع، واستبدله بأدوات التباعد القياسية المرنة مثل .mb-3 أو .mb-4.
تتكون البنية الحديثة لأي حقل نصي أو مربع نص متعدد الأسطر <textarea> من عنصر <label class="form-label"> مرتبط عبر سمة for بمعرّف الحقل id، يليه الحقل نفسه مزوداً بكلاس .form-control الذي يمنحه عرضاً كاملاً 100% وحواف مستديرة وحلقة تركيز لونية متناسقة.
<label for="email" class="form-label">Work Email</label>
<input type="email" class="form-control mb-3" id="email"
placeholder="[email protected]">
<label for="bio" class="form-label">Project Notes</label>
<textarea class="form-control" id="bio" rows="3"></textarea>كثيراً ما يحتاج المستخدم إلى معرفة شروط كلمة المرور أو صيغة الإدخال المطلوبة قبل البدء بالكتابة بدلاً من مفاجأته برسالة خطأ بعد الإرسال. يخصص بوتستراب لهذا الغرض الكلاس .form-text الذي ينسق النص الإرشادي أسفل الحقل بحجم خط مدمج 0.875em ولون ثانوي مريح للعين.
لضمان إمكانية الوصول الكاملة، امنح عنصر .form-text معرّفاً فريداً id، ثم أشر إليه داخل الحقل عبر السمة aria-describedby حتى يقرأ قارئ الشاشة التسمية متبوعةً بالتعليمات المساعدة تلقائياً.
تتفاوت كثافة الواجهات بين صفحات الهبوط البارزة التي تتطلب حقولاً كبيرة واضحة، وأشرطة تصفية الجداول المزدحمة التي تحتاج حقولاً مضغوطة. يوفر بوتستراب كلاسَي تحجيم مباشرين يُضافان بجانب الكلاس الأساسي: .form-control-lg للحجم الكبير و.form-control-sm للحجم الصغير، وقد صُمِّمت أبعادهما وحشوهما الداخلي لتتطابق بالملليمتر مع أزرار .btn-lg و.btn-sm.
<input class="form-control form-control-lg mb-2"
type="text" placeholder="Large (.form-control-lg)">
<input class="form-control mb-2"
type="text" placeholder="Default (.form-control)">
<input class="form-control form-control-sm"
type="text" placeholder="Small (.form-control-sm)">من الأخطاء الشائعة الخلط بين سمتَي disabled وreadonly في النماذج. فالحقل المعطّل بسمة disabled يظهر بخلفية رمادية باهتة ولا يقبل التركيز بلوحة المفاتيح ولا تُرسل قيمته إطلاقاً ضمن بيانات النموذج إلى الخادم. أما الحقل المقيّد للقراءة فقط بسمة readonly فيمنع تعديل النص مع السماح بتحديده ونسخه وإرسال قيمته مع النموذج بشكل طبيعي.
وعندما ترغب في عرض قيمة ثابتة للقراءة فقط (مثل البريد الإلكتروني المسجّل للحساب) بهيئة نص أنيق مجرد من الإطار والخلفية مع الحفاظ على الهوامش الرأسية الدقيقة للحقول المجاورة، استبدل .form-control بالكلاس .form-control-plaintext.
<input class="form-control mb-2" type="text"
value="Disabled field" disabled>
<input class="form-control mb-2" type="text"
value="Readonly copyable value" readonly>
<input class="form-control-plaintext" type="text"
value="[email protected]" readonly>في الإصدارات السابقة من بوتستراب كان تنسيق حقل رفع الملفات يتطلب تراكيب معقدة وكود جافاسكريبت لإظهار اسم الملف المختار. أما في Bootstrap 5 فقد أصبح العنصر القياسي <input class="form-control" type="file"> منسقاً بالكامل عبر المحدد الحديث ::file-selector-button دون أي عناصر إضافية، ويدعم الاختيار المتعدد بسمة multiple والأحجام lg وsm وحالة التعطيل بسلاسة تامة.
جرّب جميع أنماط الحقول الأساسية والملفات في المختبر الحي التالي:
يكتمل طقم الحقول الأساسية في 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.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Form Control حقل التحكم بالنموذج
- الكلاس الأساسي في بوتستراب لتوحيد العرض والحشو واستدارة الحواف وحلقة التركيز على الحقول النصية وحقول الملفات.
- للمراجعة
- 02 Plaintext Read-Only Control حقل النص المجرد للقراءة
- حقل قراءة فقط منسق بكلاس .form-control-plaintext ليظهر كنص ثابت بدون إطار مع الحفاظ على محاذاة النموذج.
- للمراجعة
- 03 Datalist Autocomplete قائمة الاقتراحات التلقائية
- عنصر HTML5 قياسي يرتبط بالحقل عبر سمة list لتقديم خيارات بحث فورية دون منع المستخدم من كتابة نص حر.
- للمراجعة
- 04 Helper Hint Text نص الإرشاد المساعد
- سطر إرشادي هادئ أسفل الحقل يُنسق بكلاس .form-text ويُربط برمجياً بقارئات الشاشة عبر aria-describedby.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 ARIA ARIA
- Accessible Rich Internet Applications
- تطبيقات الإنترنت الغنية المتاحة — توفر سمة aria-describedby لربط نصوص المساعدة بشروط الإدخال مباشرة مع الحقل لقارئات الشاشة.
- للمراجعة
- 02 HTML5 HTML5
- HyperText Markup Language 5
- الجيل الخامس من لغة توصيف النص الفائق — قدّمت أنواع الحقول الأصيلة مثل البريد واللون والملف وعنصر <datalist> التي ينسقها بوتستراب 5 مباشرة.
- للمراجعة
- 03 RTL RTL
- Right-to-Left
- الاتجاه من اليمين إلى اليسار — يعكس موضع زر اختيار الملف ومحاذاة النصوص تلقائياً عند تضمين ملف التنسيق العربي لبوتستراب.
- للمراجعة
- 04 HTTP HTTP
- HyperText Transfer Protocol
- بروتوكول نقل النص الفائق — ينقل قيم الحقول المفعّلة وحقول القراءة فقط ضمن الطلب بينما يستبعد الحقول المعطّلة بسمة disabled.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
اجمع عنصر .form-label وحقل كلمة مرور .form-control ونص إرشاد .form-text داخل حاوية .mb-3 مع ربط التسمية عبر for/id ونص الإرشاد عبر aria-describedby.
-
أنشئ نموذجاً يضم بريداً إلكترونياً ثابتاً بكلاس .form-control-plaintext وحقل رفع ملفات متعدد بكلاس .form-control ومنتقي ألوان بكلاس .form-control-color.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.