الدرس الثامن: النماذج (Forms) في Bootstrap
النماذج تعتبر من العناصر الأساسية في تطوير الويب، حيث تسمح للمستخدمين بإدخال بيانات والتفاعل مع الموقع. مع Bootstrap، يمكنك إنشاء نماذج متجاوبة ومناسبة لجميع الأجهزة بسهولة باستخدام الفئات الجاهزة التي يوفرها الإطار. في هذا الدرس، سنتعرف على كيفية إنشاء نماذج باستخدام الفئات الجاهزة في Bootstrap، وكيفية التعامل مع الحقول المدخلة مثل input, textarea, و select. كما سنستعرض كيفية إضافة ملاحظات وحقول تحقق مثل form-check و form-group.
1. إنشاء النماذج باستخدام الفئات الجاهزة في Bootstrap
في Bootstrap، تُسهل الفئات الجاهزة بناء النماذج عن طريق توفير تنسيق موحد للحقول والعناصر المختلفة. لإنشاء نموذج، نبدأ باستخدام العنصر <form> ثم نضيف العناصر التي سنستخدمها داخل النموذج مثل الحقول المدخلة (input و textarea و select) وأزرار الإرسال.
أ. الهيكل الأساسي للنموذج
يتم إنشاء النموذج بإضافة الفئة .form لتحديد أنه يحتوي على عناصر نموذجية. بعد ذلك، نضيف الفئات المناسبة لكل حقل داخل النموذج.
مثال عملي:
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">البريد الإلكتروني</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">كلمة المرور</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">تذكرني</label>
</div>
<button type="submit" class="btn btn-primary">إرسال</button>
</form>
في هذا المثال، تم استخدام بعض الفئات الجاهزة من Bootstrap مثل:
.form-labelلتنسيق العلامات (labels)..form-controlلتنسيق حقول الإدخال..form-checkلتنسيق عناصر التحقق (checkbox).
2. التعامل مع الحقول المدخلة (Input, Textarea, Select)
يعد التعامل مع الحقول المدخلة من الأمور الأساسية في النماذج، حيث يمكنك استخدام input, textarea, و select لجمع البيانات من المستخدمين. يقدم Bootstrap فئات جاهزة لتنسيق هذه الحقول بشكل سهل وسريع.
أ. الحقول المدخلة (Input)
يُستخدم عنصر input لجمع البيانات من المستخدم، سواء كانت نصية أو رقمية أو عبر أنواع أخرى من الحقول مثل البريد الإلكتروني وكلمات المرور.
مثال عملي:
<div class="mb-3">
<label for="exampleInputName" class="form-label">الاسم</label>
<input type="text" class="form-control" id="exampleInputName">
</div>
- في المثال السابق، استخدمنا الحقل
inputمن النوعtextلجمع الاسم. - الفئة
.form-controlتجعل الحقل يظهر بتنسيق مناسب.
ب. الحقل النصي (Textarea)
إذا كنت بحاجة إلى مساحة أكبر لإدخال نصوص طويلة (مثل التعليقات أو الملاحظات)، يمكن استخدام عنصر textarea.
مثال عملي:
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">التعليق</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
- في المثال السابق، تم استخدام عنصر
textareaمع الفئة.form-controlلتنسيق الحقل. - يتم تحديد عدد الأسطر باستخدام خاصية
rows.
ج. الحقول المنسدلة (Select)
إذا كنت ترغب في تقديم مجموعة من الخيارات للمستخدم للاختيار من بينها، يمكنك استخدام عنصر select الذي يعرض قائمة منسدلة.
مثال عملي:
<div class="mb-3">
<label for="exampleFormControlSelect1" class="form-label">اختيار الفئة</label>
<select class="form-select" id="exampleFormControlSelect1">
<option value="1">الفئة 1</option>
<option value="2">الفئة 2</option>
<option value="3">الفئة 3</option>
</select>
</div>
- في هذا المثال، تم استخدام
selectمع الفئة.form-selectلتنسيق القائمة المنسدلة. - يمكنك إضافة عناصر
optionبداخلselectلتمثيل الخيارات المتاحة.
3. إضافة ملاحظات وحقول تحقق مثل form-check و form-group
عند بناء النماذج، غالبًا ما تحتاج إلى إضافة ملاحظات أو رسائل توضيحية، بالإضافة إلى حقول تحقق مثل checkbox و radio لضمان إدخال المستخدم بيانات دقيقة وصحيحة. Bootstrap يقدم فئات جاهزة مثل .form-check و .form-group لهذا الغرض.
أ. فئة form-check
تُستخدم فئة form-check لتنظيم عناصر التحقق مثل المربعات المربوطة (checkboxes) وأزرار الراديو (radio buttons).
مثال عملي – Checkbox:
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">قبول الشروط والأحكام</label>
</div>
- في المثال السابق، تم استخدام فئة
form-checkلتنسيق مربع الاختيار. - تم إضافة علامة
labelلربط النص بمربع الاختيار.
ب. فئة form-group
تُستخدم فئة form-group لتنظيم الحقول داخل النموذج وجعلها تظهر بشكل مرتب. هذه الفئة تساعد في تحسين التنسيق، خاصة عندما يتطلب النموذج جمع مجموعة من الحقول المتشابهة.
مثال عملي:
<div class="form-group">
<label for="inputEmail">البريد الإلكتروني</label>
<input type="email" class="form-control" id="inputEmail" placeholder="ادخل بريدك الإلكتروني">
</div>
- هنا، تم استخدام فئة
form-groupلتجميع حقل الإدخال مع عنوانه (label)، مما يسهل ترتيب الحقول داخل النموذج.
ج. ملاحظات ورسائل توضيحية
يقدم Bootstrap أيضًا فئات لعرض الملاحظات أو الرسائل التوضيحية بجانب الحقول المدخلة، مثل الرسائل التحذيرية أو التأكيدية بعد عملية التحقق.
مثال عملي – ملاحظات:
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">كلمة المرور</label>
<input type="password" class="form-control" id="exampleInputPassword1">
<div class="form-text">تأكد من أن كلمة المرور تحتوي على 8 أحرف على الأقل.</div>
</div>
- في هذا المثال، تم إضافة عنصر
divمع الفئة.form-textلعرض ملاحظة للمستخدم بعد حقل الإدخال.
4. التحقق من صحة البيانات في النماذج
Bootstrap يتيح لك إضافة التحقق من صحة البيانات مباشرة داخل النماذج باستخدام الفئات الجاهزة مثل .is-invalid و .is-valid لتوضيح حالتي الإدخال الصحيحة والخاطئة. هذه الفئات تتفاعل مع HTML5 validation API لتحديد ما إذا كان الحقل المدخل صالحًا أم لا.
مثال عملي – تحقق من كلمة المرور:
<form>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">كلمة المرور</label>
<input type="password" class="form-control is-invalid" id="exampleInputPassword1">
<div class="invalid-feedback">يرجى إدخال كلمة مرور صحيحة.</div>
</div>
<button type="submit" class="btn btn-primary">إرسال</button>
</form>
- هنا، تم استخدام فئة
.is-invalidلتحديد أن الحقل غير صالح، وعرض ملاحظة توضح الخطأ.
الخلاصة
في هذا الدرس، تعلمنا كيفية إنشاء نماذج باستخدام الفئات الجاهزة في Bootstrap، والتعامل مع الحقول المدخلة مثل input, textarea, و select. كما استعرضنا كيفية إضافة ملاحظات وحقول تحقق مثل form-check و form-group لتحسين تجربة المستخدم. باستخدام هذه الأدوات، يمكنك بناء نماذج احترافية ومتجاوبة بسرعة وكفاءة، مما يساعد في تحسين أداء الموقع وتجربة المستخدم.
