إطار Bootstrap 5

أساسيات النماذج

13 دقيقة الدرس 18 من 40

مقدمة إلى نماذج Bootstrap

النماذج ضرورية لجمع مدخلات المستخدم. توفر Bootstrap 5 تنسيقًا شاملاً للنماذج مع التركيز على إمكانية الوصول والاتساق وسهولة الاستخدام. يقدم الإطار عناصر تحكم متنوعة في النماذج وتخطيطات وخيارات تخصيص.

ملاحظة: تستخدم نماذج Bootstrap 5 عناصر تحكم محدثة في النماذج مع تنسيق محسّن وميزات وصول أفضل مقارنة بالإصدارات السابقة.

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

تنسق Bootstrap جميع عناصر التحكم الأصلية في النماذج باستخدام فئة form-control:

<!-- إدخال نص -->
<div class="mb-3">
    <label for="exampleInput1" class="form-label">عنوان البريد الإلكتروني</label>
    <input type="email" class="form-control" id="exampleInput1" placeholder="name@example.com">
</div>

<!-- منطقة نص -->
<div class="mb-3">
    <label for="exampleTextarea1" class="form-label">مثال على منطقة نص</label>
    <textarea class="form-control" id="exampleTextarea1" rows="3"></textarea>
</div>

<!-- قائمة منسدلة -->
<div class="mb-3">
    <label for="exampleSelect1" class="form-label">مثال على قائمة منسدلة</label>
    <select class="form-select" id="exampleSelect1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

<!-- قائمة منسدلة متعددة -->
<div class="mb-3">
    <label for="exampleSelect2" class="form-label">قائمة منسدلة متعددة</label>
    <select class="form-select" id="exampleSelect2" multiple>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

<!-- إدخال ملف -->
<div class="mb-3">
    <label for="formFile" class="form-label">إدخال ملف افتراضي</label>
    <input class="form-control" type="file" id="formFile">
</div>
                

نصيحة: استخدم دائمًا form-label للتسميات وform-control للمدخلات لضمان تنسيق متسق ووصول مناسب.

أحجام النماذج

تحكم في أحجام عناصر النماذج باستخدام فئات الحجم:

<!-- إدخال كبير -->
<input class="form-control form-control-lg" type="text" placeholder="إدخال كبير">

<!-- إدخال افتراضي -->
<input class="form-control" type="text" placeholder="إدخال افتراضي">

<!-- إدخال صغير -->
<input class="form-control form-control-sm" type="text" placeholder="إدخال صغير">

<!-- قائمة منسدلة كبيرة -->
<select class="form-select form-select-lg">
    <option>قائمة منسدلة كبيرة</option>
</select>

<!-- قائمة منسدلة صغيرة -->
<select class="form-select form-select-sm">
    <option>قائمة منسدلة صغيرة</option>
</select>
                

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

النماذج العمودية (افتراضي)

النماذج عمودية بشكل افتراضي مع تسميات وعناصر تحكم مكدسة:

<form>
    <div class="mb-3">
        <label for="email" class="form-label">عنوان البريد الإلكتروني</label>
        <input type="email" class="form-control" id="email">
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">كلمة المرور</label>
        <input type="password" class="form-control" id="password">
    </div>
    <button type="submit" class="btn btn-primary">إرسال</button>
</form>
                

النماذج الأفقية

أنشئ نماذج أفقية باستخدام فئات الشبكة:

<form>
    <div class="row mb-3">
        <label for="inputEmail3" class="col-sm-2 col-form-label">البريد الإلكتروني</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3">
        </div>
    </div>
    <div class="row mb-3">
        <label for="inputPassword3" class="col-sm-2 col-form-label">كلمة المرور</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3">
        </div>
    </div>
    <button type="submit" class="btn btn-primary">تسجيل الدخول</button>
</form>
                

النماذج المضمنة

أنشئ نماذج مضمنة باستخدام أدوات flex:

<form class="row row-cols-lg-auto g-3 align-items-center">
    <div class="col-12">
        <label class="visually-hidden" for="inlineFormInput">الاسم</label>
        <input type="text" class="form-control" id="inlineFormInput" placeholder="جين دو">
    </div>
    <div class="col-12">
        <label class="visually-hidden" for="inlineFormInputGroup">اسم المستخدم</label>
        <div class="input-group">
            <div class="input-group-text">@</div>
            <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="اسم المستخدم">
        </div>
    </div>
    <div class="col-12">
        <button type="submit" class="btn btn-primary">إرسال</button>
    </div>
</form>
                

تغيير Bootstrap 5: تستخدم النماذج المضمنة الآن أدوات flex وفئات الشبكة بدلاً من فئة form-inline.

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

قم بتوسيع عناصر التحكم في النموذج عن طريق إضافة نص أو أزرار أو مجموعات أزرار على أي من الجانبين:

<!-- إضافة نص قبل -->
<div class="input-group mb-3">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="اسم المستخدم">
</div>

<!-- إضافة نص بعد -->
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="اسم مستخدم المستلم">
    <span class="input-group-text">@example.com</span>
</div>

<!-- إضافة نص على كلا الجانبين -->
<div class="input-group mb-3">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control">
    <span class="input-group-text">.00</span>
</div>

<!-- إضافة زر -->
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="بحث...">
    <button class="btn btn-outline-secondary" type="button">بحث</button>
</div>

<!-- مدخلات متعددة -->
<div class="input-group mb-3">
    <span class="input-group-text">الاسم الأول والأخير</span>
    <input type="text" class="form-control" placeholder="الاسم الأول">
    <input type="text" class="form-control" placeholder="الاسم الأخير">
</div>
                

نص النموذج (نص المساعدة)

قدم معلومات مفيدة أسفل عناصر التحكم في النموذج:

<div class="mb-3">
    <label for="inputPassword5" class="form-label">كلمة المرور</label>
    <input type="password" class="form-control" id="inputPassword5" aria-describedby="passwordHelpBlock">
    <div id="passwordHelpBlock" class="form-text">
        يجب أن تكون كلمة المرور من 8 إلى 20 حرفًا، وتحتوي على حروف وأرقام، ويجب ألا تحتوي على مسافات أو أحرف خاصة أو رموز تعبيرية.
    </div>
</div>

<!-- نص نموذج مضمن -->
<form class="row g-3 align-items-center">
    <div class="col-auto">
        <label for="inputPassword6" class="col-form-label">كلمة المرور</label>
    </div>
    <div class="col-auto">
        <input type="password" class="form-control" id="inputPassword6" aria-describedby="passwordHelpInline">
    </div>
    <div class="col-auto">
        <span id="passwordHelpInline" class="form-text">
            يجب أن تكون من 8 إلى 20 حرفًا.
        </span>
    </div>
</form>
                

نصيحة: استخدم aria-describedby لربط نص المساعدة بعناصر التحكم في النموذج للحصول على إمكانية وصول أفضل.

التسميات العائمة

تقدم Bootstrap 5 التسميات العائمة، وهو نمط تصميم نموذج حديث:

<!-- تسمية عائمة واحدة -->
<div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
    <label for="floatingInput">عنوان البريد الإلكتروني</label>
</div>

<!-- تسمية عائمة مع كلمة المرور -->
<div class="form-floating mb-3">
    <input type="password" class="form-control" id="floatingPassword" placeholder="كلمة المرور">
    <label for="floatingPassword">كلمة المرور</label>
</div>

<!-- تسمية عائمة مع منطقة نص -->
<div class="form-floating mb-3">
    <textarea class="form-control" placeholder="اترك تعليقًا هنا" id="floatingTextarea" style="height: 100px"></textarea>
    <label for="floatingTextarea">التعليقات</label>
</div>

<!-- تسمية عائمة مع قائمة منسدلة -->
<div class="form-floating mb-3">
    <select class="form-select" id="floatingSelect">
        <option selected>افتح قائمة الاختيار هذه</option>
        <option value="1">واحد</option>
        <option value="2">اثنان</option>
        <option value="3">ثلاثة</option>
    </select>
    <label for="floatingSelect">يعمل مع القوائم المنسدلة</label>
</div>

<!-- التسميات العائمة في الشبكة -->
<div class="row g-2">
    <div class="col-md">
        <div class="form-floating">
            <input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com">
            <label for="floatingInputGrid">عنوان البريد الإلكتروني</label>
        </div>
    </div>
    <div class="col-md">
        <div class="form-floating">
            <select class="form-select" id="floatingSelectGrid">
                <option selected>افتح قائمة الاختيار هذه</option>
                <option value="1">واحد</option>
                <option value="2">اثنان</option>
                <option value="3">ثلاثة</option>
            </select>
            <label for="floatingSelectGrid">يعمل مع القوائم المنسدلة</label>
        </div>
    </div>
</div>
                

ملاحظة: عند استخدام التسميات العائمة، فإن سمة العنصر النائب مطلوبة ولكنها لن تكون مرئية عندما يحتوي الإدخال على قيمة.

الحالات المعطلة والقراءة فقط

يمكن أن تحتوي النماذج على حالات معطلة أو للقراءة فقط:

<!-- إدخال معطل -->
<input class="form-control" type="text" placeholder="إدخال معطل" disabled>

<!-- قائمة منسدلة معطلة -->
<select class="form-select" disabled>
    <option>قائمة منسدلة معطلة</option>
</select>

<!-- إدخال للقراءة فقط -->
<input class="form-control" type="text" value="إدخال للقراءة فقط" readonly>

<!-- نص عادي للقراءة فقط -->
<div class="mb-3 row">
    <label for="staticEmail" class="col-sm-2 col-form-label">البريد الإلكتروني</label>
    <div class="col-sm-10">
        <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
</div>
                

تمرين: إنشاء نموذج تسجيل

أنشئ نموذج تسجيل كامل بالمتطلبات التالية:

استخدم التسميات العائمة لجميع المدخلات
ضمّن الحقول: الاسم الأول، الاسم الأخير، البريد الإلكتروني، اسم المستخدم، كلمة المرور، تأكيد كلمة المرور
أضف قائمة منسدلة لـ "الدولة" مع 5 خيارات على الأقل
ضمّن منطقة نص لـ "السيرة الذاتية" (اختياري)
أضف مجموعة إدخال لاسم المستخدم مع بادئة "@"
ضمّن نص مساعدة أسفل حقل كلمة المرور يشرح المتطلبات
أضف إدخال ملف لصورة الملف الشخصي
ضمّن زر إرسال أساسي
استخدم تباعدًا مناسبًا (mb-3) بين مجموعات النماذج

أفضل الممارسات

قم دائمًا بربط التسميات بعناصر التحكم في النموذج باستخدام سمات for وid
استخدم أنواع الإدخال المناسبة (email، tel، url، date، إلخ) للحصول على تجربة أفضل على الهاتف المحمول
قدم نص عنصر نائب مفيد أو نص مساعدة لتوجيه المستخدمين
استخدم required وpattern وسمات التحقق الأخرى لـ HTML5
اجعل تسميات النموذج واضحة وموجزة وموضوعة فوق المدخلات
اجمع حقول النموذج ذات الصلة بشكل منطقي
استخدم تباعدًا متسقًا في جميع أنحاء نماذجك
فكر في استخدام التسميات العائمة للتصاميم الحديثة والنظيفة
اختبر النماذج دائمًا باستخدام التنقل بلوحة المفاتيح وقارئات الشاشة

الخلاصة

في هذا الدرس، تعلمت عن أساسيات نماذج Bootstrap بما في ذلك عناصر التحكم في النماذج (المدخلات، مناطق النص، القوائم المنسدلة)، تخطيطات النماذج المختلفة (عمودي، أفقي، مضمن)، مجموعات الإدخال، نص مساعدة النموذج، وميزة التسميات العائمة الجديدة في Bootstrap 5. تشكل هذه الأساسيات الأساس لإنشاء نماذج قابلة للوصول وسهلة الاستخدام.