English 中文 العربية 日本語 Português

Bootstrap: النماذج والتحقق من الصحة

آخر تحديث: 2026-08-26

1. مقدمة

(1) المتطلبات الأساسية

(2) 🎯 ما الذي ستتعلّمه

(3) المشكلة

يطوّر Bob صفحة تسجيل مستخدم ويحتاج إلى جمع الاسم والبريد الإلكتروني وكلمة المرور واختيار الدولة والموافقة على الشروط — فئات نماذج Bootstrap تتيح له تخطّي كتابة أي أنماط CSS، والتركيز فقط على بنية HTML ومنطق التحقق.

(4) الحل

النماذج هي الطريقة الأساسية للتفاعل مع المستخدمين. يوفر Bootstrap مجموعة موحدة من أنماط عناصر التحكم ونظام تغذية راجعة للتحقق، مما يجعل تطوير النماذج فعالًا وجميلًا.

لفهم الفكرة: نماذج Bootstrap = فلتر تجميل لعناصر التحكم الأصلية في المتصفح — جميع عناصر <input> و<select> و<textarea> تحصل على أنماط موحدة ومسافات وتغذية راجعة تفاعلية عند لفّها بـ .form-control.

(5) الفائدة

باستخدام فئات أدوات النماذج في Bootstrap، يمكنك التركيز على بنية HTML ومنطق التحقق دون كتابة أي كود CSS.

2. عناصر التحكم في النماذج

جميع عناصر تحكم الإدخال النصية تستخدم .form-control:

▶ مثال: نموذج أساسي

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <form>
      <div class="mb-3">
        <label for="name" class="form-label">Full Name</label>
        <input type="text" class="form-control" id="name" placeholder="Enter your name">
      </div>

      <div class="mb-3">
        <label for="country" class="form-label">Country</label>
        <select class="form-select" id="country">
          <option selected>Choose...</option>
          <option value="us">United States</option>
          <option value="jp">Japan</option>
          <option value="uk">United Kingdom</option>
        </select>
      </div>

      <div class="mb-3">
        <label class="form-label">Skills</label>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="html" checked>
          <label class="form-check-label" for="html">HTML</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="css">
          <label class="form-check-label" for="css">CSS</label>
        </div>
      </div>

      <div class="mb-3">
        <label class="form-label">Experience Level</label>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="level" id="beginner" checked>
          <label class="form-check-label" for="beginner">Beginner</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="level" id="advanced">
          <label class="form-check-label" for="advanced">Advanced</label>
        </div>
      </div>

      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثير مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

3. أنواع عناصر التحكم في النماذج

عنصر التحكم الفئة الوصف
إدخال نص form-control نص أحادي السطر، بريد إلكتروني، كلمة مرور، url، إلخ
منطقة نص form-control نص متعدد الأسطر (rows يتحكم في عدد الأسطر)
قائمة منسدلة form-select صندوق اختيار منسدل
مربع اختيار form-check-input اختيار متعدد
زر راديوي form-check-input اختيار واحد (حصري متبادل بنفس الاسم)
شريط تمرير form-range شريط تمرير
ملف form-control رفع ملف

4. تخطيط النماذج

(1) تخطيط الشبكة

HTML 
<div class="row">
  <div class="col-md-6 mb-3">
    <label for="firstName" class="form-label">First Name</label>
    <input type="text" class="form-control" id="firstName">
  </div>
  <div class="col-md-6 mb-3">
    <label for="lastName" class="form-label">Last Name</label>
    <input type="text" class="form-control" id="lastName">
  </div>
</div>
▶ جرّب الكود

النتيجة: تأثير مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

(2) نموذج مضمّن

HTML 
<form class="row g-3">
  <div class="col-auto">
    <input type="search" class="form-control" placeholder="Search...">
  </div>
  <div class="col-auto">
    <button class="btn btn-primary" type="submit">Go</button>
  </div>
</form>
▶ جرّب الكود

النتيجة: تأثير مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

(3) نموذج أفقي

HTML 
<div class="row mb-3">
  <label for="email2" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="email2">
  </div>
</div>
▶ جرّب الكود

النتيجة: تأثير مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

5. مجموعات الإدخال

HTML 
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Amount">
  <span class="input-group-text">.00</span>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Search</button>
  <input type="text" class="form-control" placeholder="Type to search">
</div>
▶ جرّب الكود

النتيجة: تأثير مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

6. التحقق من الصحة

HTML 
<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="validationName" class="form-label">First Name</label>
    <input type="text" class="form-control" id="validationName" required>
    <div class="valid-feedback">Looks good!</div>
    <div class="invalid-feedback">Please enter your name.</div>
  </div>

  <div class="col-md-4">
    <label for="validationEmail" class="form-label">Email</label>
    <input type="email" class="form-control" id="validationEmail" required>
    <div class="valid-feedback">Valid email!</div>
    <div class="invalid-feedback">Please provide a valid email.</div>
  </div>

  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit</button>
  </div>
</form>

<script>
  (function() {
    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms).forEach(function(form) {
      form.addEventListener('submit', function(event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }
        form.classList.add('was-validated')
      }, false)
    })
  })()
</script>
▶ جرّب الكود

النتيجة: تأثير مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

(1) أنماط التغذية الراجعة للتحقق

الفئة الحالة طريقة العرض
.valid-feedback الإدخال صالح نص أخضر
.invalid-feedback الإدخال غير صالح نص أحمر
.was-validated بعد إرسال النموذج يُفعّل جميع التغذية الراجعة
is-valid / is-invalid تحكم يدوي حد الحالة

7. المزيد من أمثلة النماذج

▶ مثال: نموذج تسجيل كامل (مع تحقق)

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Signup Form</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="card mx-auto" style="max-width: 500px;">
      <div class="card-header bg-primary text-white">
        <h4 class="mb-0">Create Account</h4>
      </div>
      <div class="card-body">
        <form class="needs-validation" novalidate>
          <div class="mb-3">
            <label for="fullName" class="form-label">Full Name</label>
            <input type="text" class="form-control" id="fullName" required>
            <div class="invalid-feedback">Please enter your name.</div>
          </div>
          <div class="mb-3">
            <label for="signupEmail" class="form-label">Email</label>
            <input type="email" class="form-control" id="signupEmail" required>
            <div class="invalid-feedback">Please enter a valid email.</div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="password" class="form-label">Password</label>
              <input type="password" class="form-control" id="password" minlength="8" required>
              <div class="invalid-feedback">Password must be at least 8 characters.</div>
            </div>
            <div class="col-md-6">
              <label for="confirmPwd" class="form-label">Confirm</label>
              <input type="password" class="form-control" id="confirmPwd" required>
              <div class="invalid-feedback">Passwords must match.</div>
            </div>
          </div>
          <div class="mb-3">
            <label for="countrySelect" class="form-label">Country</label>
            <select class="form-select" id="countrySelect" required>
              <option value="">Choose...</option>
              <option value="us">United States</option>
              <option value="uk">United Kingdom</option>
              <option value="jp">Japan</option>
            </select>
            <div class="invalid-feedback">Please select a country.</div>
          </div>
          <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="agreeTerms" required>
            <label class="form-check-label" for="agreeTerms">I agree to the terms and conditions</label>
            <div class="invalid-feedback">You must agree to continue.</div>
          </div>
          <button type="submit" class="btn btn-primary w-100">Register</button>
        </form>
      </div>
    </div>
  </div>
  <script>
    (function() {
      var forms = document.querySelectorAll('.needs-validation')
      Array.prototype.slice.call(forms).forEach(function(form) {
        form.addEventListener('submit', function(event) {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
          form.classList.add('was-validated')
        }, false)
      })
    })()
  </script>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثير مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

▶ مثال: نموذج بحث (مجموعة إدخال)

HTML 
<form class="container py-4">
  <div class="row g-2">
    <div class="col-md-3">
      <select class="form-select">
        <option selected>All Categories</option>
        <option value="electronics">Electronics</option>
        <option value="clothing">Clothing</option>
        <option value="books">Books</option>
      </select>
    </div>
    <div class="col-md-6">
      <div class="input-group">
        <input type="search" class="form-control" placeholder="Search products...">
        <button class="btn btn-primary" type="submit">Search</button>
      </div>
    </div>
    <div class="col-md-3">
      <button class="btn btn-outline-secondary w-100" type="button">Advanced Filters</button>
    </div>
  </div>
</form>
▶ جرّب الكود

النتيجة: تأثير مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

▶ مثال: نموذج مضمّن

HTML 
<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <input type="text" class="form-control" placeholder="Username">
  </div>
  <div class="col-12">
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="rememberMe">
      <label class="form-check-label" for="rememberMe">Remember me</label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign In</button>
  </div>
</form>
▶ جرّب الكود

النتيجة: تأثير مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

▶ مثال: نموذج بالتسمية العائمة

HTML 
<div class="container py-4" style="max-width: 400px;">
  <form>
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
      <label for="floatingEmail">Email address</label>
    </div>
    <div class="form-floating mb-3">
      <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
      <label for="floatingPassword">Password</label>
    </div>
    <div class="form-floating mb-3">
      <select class="form-select" id="floatingSelect">
        <option value="">Choose...</option>
        <option value="free">Free Plan</option>
        <option value="pro">Pro Plan</option>
        <option value="enterprise">Enterprise</option>
      </select>
      <label for="floatingSelect">Subscription Plan</label>
    </div>
    <div class="form-floating mb-3">
      <textarea class="form-control" id="floatingTextarea" style="height: 100px" placeholder="Comments"></textarea>
      <label for="floatingTextarea">Message</label>
    </div>
    <button class="btn btn-primary w-100">Submit</button>
  </form>
</div>
▶ جرّب الكود

النتيجة: تأثير مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

(1) مخطط قرار تخطيط النماذج

100% 
flowchart TD
    A[Start designing form] --> B{Number of fields}
    B -->|1-3| C[Simple stacking<br/>separate with mb-3]
    B -->|4-8| D{Needs grouping?}
    D -->|Yes| E[Grid layout<br/>row + col-*]
    D -->|No| F[Inline/Horizontal layout]
    B -->|8+| G[Multi-column grid<br/>or step-by-step]
    E --> H{Needs prefix?}
    H -->|Yes| I[input-group]
    H -->|No| J[Direct form-control]
    F --> K{Floating label?}
    K -->|Yes| L[form-floating]
    K -->|No| M[Regular label]

النتيجة: تأثير مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة.

عنصر التحكم الفئة أنواع البيانات المطبّقة
نص أحادي السطر form-control الاسم، البريد الإلكتروني، كلمة المرور
نص متعدد الأسطر form-control (textarea) التعليقات، الأوصاف
قائمة منسدلة form-select الدولة، الفئة، الخيارات
مربع اختيار form-check-input اختيار متعدد، الموافقة على الشروط
زر راديوي form-check-input (radio) الجنس، المستوى، الخيارات
شريط تمرير form-range نطاق السعر، التقييم
رفع ملف form-control (file) الصور، المستندات
تنويع مجموعة الإدخال نمط الكود حالة الاستخدام
نص قبل input-group-text + form-control المبلغ $، بادئة اسم المستخدم @
نص بعد form-control + input-group-text لاحقة .00، وحدة px
زر قبل button + form-control صندوق البحث
زر بعد form-control + button تبديل ظهور كلمة المرور
عناصر متعددة عدة input-group-text نطاق تاريخ، إدخال مركب
حالة التحقق الفئة الحد نص التغذية الراجعة
صالح is-valid أخضر valid-feedback
غير صالح is-invalid أحمر invalid-feedback
بعد الإرسال was-validated تبديل تلقائي يُفعّل جميع التغذية الراجعة
تلميح أدوات مدمج مع valid-tooltip نفس ما سبق تلميح بنمط الفقاعة

❓ أسئلة شائعة

س لماذا لا يكون لعناصر التحكم في النماذج عرضها الخاص؟
ج .form-control له width: 100% افتراضيًا. للتحكم في العرض، ضعه داخل عمود شبكة (col-*) أو أضف style="width: 300px".
س ما الغرض من .form-label؟
ج توحّد المسافة (margin-bottom: 0.5rem) وحجم خط <label>. تعمل بدونه، لكن إضافتها موصى بها للاتساق.
س هل يمكنني تخصيص رسائل الخطأ في التحقق من النماذج؟
ج نعم. النص داخل <div class="invalid-feedback"> يمكن أن يكون أي شيء تريده. بالإضافة إلى ذلك، يتم دعم طريقة setCustomValidity().
س هل يمكن لمجموعات الإدخال تداخل عناصر متعددة؟
ج نعم. يمكن أن تحتوي input-group على عدة input-group-text وform-control وأزرار.
س هل تدعم التسميات العائمة (form-floating) جميع المتصفحات؟
ج التسميات العائمة تستخدم الفئة الزائفة CSS :placeholder-shown، التي تدعمها المتصفحات الحديثة. IE لا يدعمها، لكن IE توقف صيانته. إذا كنت تحتاج لدعم متصفحات قديمة جدًا، يُوصى باستخدام تخطيطات التسميات التقليدية.

📖 ملخص

📝 تمارين

  1. ⭐ أنشئ نموذج تسجيل كامل: الاسم (نص)، العمر (رقم)، الدولة (قائمة منسدلة)، كلمة المرور (كلمة مرور)، تأكيد كلمة المرور، جميعها بأنماط Bootstrap.
  2. ⭐⭐ نفّذ التحقق للنموذج في التمرين 1: الاسم مطلوب، 2-20 حرفًا؛ كلمة المرور 8 أحرف على الأقل؛ البريد الإلكتروني بصيغة صحيحة. اعرض invalid-feedback أحمر عند عدم تلبية الشروط.
  3. ⭐⭐⭐ أنشئ مجموعة إدخال بحث: form-select يسار لاختيار الفئة + form-control صندوق بحث في الوسط + زر بحث يمين.

الدرس السابق: الجداول · الدرس التالي: Carousel وModal

Web-Tutorial.com

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

100%