Bootstrap Forms and Validation: بناء نماذج احترافية جاهزة للإنتاج

نقدم مجموعة شاملة من مقالات التعليمية الهامة في تطوير الويب لتحويل أفكارك إلى واقع رقمي

Bootstrap Forms and Validation: بناء نماذج احترافية جاهزة للإنتاج

Bootstrap 2026-03-21 علاء عامر

نماذج Bootstrap والتحقق من صحتها: تجربة مستخدم جاهزة للإنتاج

دليل احترافي من إعداد علاء عامر - مطور ومصمم مواقع ويب خبير

النماذج الرائعة تحوّل الزوار إلى عملاء محتملين وعملاء فعليين. يوفر لك Bootstrap عناصر تحكم قوية للنماذج وبنية تحقق فعّالة بأقل قدر من CSS المخصص.

1) أساسيات هيكل النموذج

<form class="row g-3">
  <div class="col-12">
    <label for="fullName" class="form-label">الاسم الكامل</label>
    <input id="fullName" type="text" class="form-control" placeholder="محمد أحمد" />
  </div>

  <div class="col-md-6">
    <label for="email" class="form-label">البريد الإلكتروني</label>
    <input id="email" type="email" class="form-control" placeholder="[email protected]" />
  </div>

  <div class="col-md-6">
    <label for="phone" class="form-label">رقم الهاتف</label>
    <input id="phone" type="tel" class="form-control" placeholder="+20 10 0000 0000" />
  </div>
</form>

استخدم row g-* للحفاظ على مسافات متناسقة بين الحقول.

3) Select و Checkbox و Switch

<div class="mb-3">
  <label class="form-label" for="service">الخدمة</label>
  <select id="service" class="form-select">
    <option selected disabled>اختر الخدمة</option>
    <option>تطوير ويب</option>
    <option>تحسين محركات البحث</option>
    <option>تصميم واجهات</option>
  </select>
</div>

<div class="form-check mb-2">
  <input class="form-check-input" type="checkbox" id="acceptPolicy" />
  <label class="form-check-label" for="acceptPolicy">أوافق على الشروط والسياسة</label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="newsletter" checked />
  <label class="form-check-label" for="newsletter">الاشتراك في النشرة البريدية</label>
</div>

5) سكربت التحقق على المتصفح

<form id="contactForm" class="needs-validation" novalidate>
  <input type="text" class="form-control" required />
  <button class="btn btn-primary mt-3" type="submit">إرسال</button>
</form>

<script>
  (() => {
    const form = document.getElementById("contactForm");

    form.addEventListener("submit", (event) => {
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }

      form.classList.add("was-validated");
    });
  })();
</script>

إضافة was-validated تظهر حالات النجاح والخطأ بعد محاولة الإرسال.

7) مشروع كامل: نموذج تواصل

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap نموذج تواصل</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body class="bg-light">
    <main class="container py-5">
      <div class="row justify-content-center">
        <div class="col-12 col-lg-8">
          <div class="card border-0 shadow-sm">
            <div class="card-body p-4 p-md-5">
              <h1 class="h3 fw-bold mb-3">تواصل معنا</h1>
              <p class="text-muted mb-4">شاركنا تفاصيل مشروعك والموعد المتوقع.</p>

              <form id="contactForm" class="needs-validation row g-3" novalidate>
                <div class="col-md-6">
                  <label for="name" class="form-label">الاسم الكامل</label>
                  <input id="name" type="text" class="form-control" required />
                  <div class="invalid-feedback">الاسم مطلوب.</div>
                </div>

                <div class="col-md-6">
                  <label for="email" class="form-label">البريد الإلكتروني</label>
                  <input id="email" type="email" class="form-control" required />
                  <div class="invalid-feedback">يرجى إدخال بريد إلكتروني صحيح.</div>
                </div>

                <div class="col-12">
                  <label for="service" class="form-label">الخدمة المطلوبة</label>
                  <select id="service" class="form-select" required>
                    <option value="">اختر خدمة...</option>
                    <option>تطوير موقع</option>
                    <option>تحسين صفحة هبوط</option>
                    <option>Technical SEO</option>
                  </select>
                  <div class="invalid-feedback">يرجى اختيار الخدمة.</div>
                </div>

                <div class="col-12">
                  <label for="message" class="form-label">تفاصيل المشروع</label>
                  <textarea id="message" class="form-control" rows="5" required></textarea>
                  <div class="invalid-feedback">يرجى كتابة تفاصيل المشروع.</div>
                </div>

                <div class="col-12 d-grid d-md-flex justify-content-md-end">
                  <button class="btn btn-primary px-4" type="submit">إرسال الرسالة</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </main>

    <script>
      (() => {
        const form = document.getElementById("contactForm");
        form.addEventListener("submit", (event) => {
          if (!form.checkValidity()) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add("was-validated");
        });
      })();
    </script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

الملخص

في هذا الدرس تعلمنا:

هيكلة النموذج بشكل صحيح
Input Groups و Floating Labels
Select و Checkbox و Switch
حالات التحقق ورسائل الخطأ
سكربت التحقق على المتصفح
مشروع نموذج تواصل كامل

الدرس القادم: Utilities في Bootstrap وتخصيص الثيم.

هل تحتاج مساعدة في بناء نماذج عالية التحويل؟

Bootstrap Forms Validation Input UX Floating Labels Input Group Web Forms

قسم المقالة

Bootstrap

Bootstrap Forms and Validation: بناء نماذج احترافية جاهزة للإنتاج

تعلم أنماط النماذج في Bootstrap: الحقول، Floating Labels، Input Groups، التحقق من الإدخال على المتصفح، ومشروع نموذج تواصل كامل.

التواصل والاستشارة

تواصل مباشر عبر الواتساب أو الهاتف لفهم احتياجات مشروعك بدقة.

التخطيط والجدولة

وضع خطة عمل واضحة مع جدول زمني محدد لكل مرحلة من المشروع.

البرمجة والتطوير

تطوير المشروع بأحدث التقنيات لضمان الأداء والأمان العاليين.

المراجعة والتسليم

ختبار شامل ومراجعة دقيقة قبل التسليم النهائي للمشروع.

علاء عامر

مطور ويب محترف بخبرة تزيد عن 10 سنوات في بناء حلول رقمية مبتكرة.

هل تحتاج هذه الخدمة؟

تواصل معي الآن للحصول على استشارة مجانية وعرض سعر

تواصل عبر واتساب رضاكم هو هدفنا الأسمى

عروض إضافية

صيانة وتحديث المواقع

نحافظ على موقعك آمنًا ومحدّثًا دائمًا
ربط الأنظمة وواجهات البرمجة

نربط أنظمتك بواجهات برمجية قوية ومرنة
تصميم وتحسين قواعد البيانات

استعلامات أسرع وهيكلة أوضح وأخطاء أقل
تأمين المواقع والحماية المتقدمة

حماية موقعك من التهديدات السيبرانية
أتمتة العمليات والمهام البرمجية

نؤتمت المهام المتكررة ونوفّر وقتك دائمًا

لديك استفسار؟

اتصل بنا الآن

00201014714795

راسلنا عبر البريد الإلكتروني

[email protected]

علاء عامر

Bootstrap Forms and Validation: بناء نماذج احترافية جاهزة للإنتاج