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

Modern Form Field Markup بنية الحقول الحديثة بنماذج BS5

تعلّم بناء حقول النماذج الحديثة في بوتستراب 5 بربط التسميات وحقول الإدخال ونصوص الإرشاد المساعدة، وضبط الأحجام وحالات التعطيل وحقول رفع الملفات ومنتقي الألوان.
3 صفوف تعليمية
بوتستراب 5
1 مشاهدة

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

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

شهدت نماذج الإدخال في Bootstrap 5 عملية تبسيط معمارية شاملة؛ إذ استغنى الإطار نهائياً عن الكلاس القديم form-group الذي كان يفرض هامشاً سفلياً ثابتاً في الإصدار الرابع، واستبدله بأدوات التباعد القياسية المرنة مثل .mb-3 أو .mb-4.

تتكون البنية الحديثة لأي حقل نصي أو مربع نص متعدد الأسطر <textarea> من عنصر <label class="form-label"> مرتبط عبر سمة for بمعرّف الحقل id، يليه الحقل نفسه مزوداً بكلاس .form-control الذي يمنحه عرضاً كاملاً 100% وحواف مستديرة وحلقة تركيز لونية متناسقة.

الصف 2 كود برمجي
HTML
<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>
الصف 3 ملاحظة هامة