انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 18
دورة Bootstrap

الاستمارات في BootStrapBootstrap Forms

ستتعلم في هذا الدرس التحكم في اي form وفي العناصر التي بداخلها وطريقة عرضهم في المتصفح باستخدام bootstrap.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,960
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

Bootstrap Forms الاستمارات في bootstrap

  • يتم اضافة كلاس form-control لاي عنصر <input> او <textarea> او <select> لاعطاء هذه العناصر عرض العنصر الاب بالكامل ولجعلهم متجاوبين مع احجام الشاشات المختلفة.
  • يتم اضافة كلاس form-label لاي <label> داخل الاستمارة لعمل padding.
  • عند استخدام checkbox او radio button يضاف لهما كلاس form-check-input ويضاف الى عنصر <label> الخاص بهم كلاس form-check-label.

الإرسال في هذه المعاينة تجربة محلية؛ لا تُرسل البيانات إلى خادم.

جرّب بنفسك

Full-Width Form

مثال على استخدام كلاس form-control لعمل استمارة بعرض الصفحة بالكامل.

HTML 
<form>
   <div class="my-3">
      <label for="email" class="form-label">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
   </div>
</form>
جرّب بنفسك

BootStrap Forms Size حجم الاستمارات في bootstrap

  • يمكن التحكم في حجم اي input يحتوي على كلاس form-control عن طريق اضافة كلاس اخر.
  • كلاس form-control-lg لكتبير عنصر <input>.
  • كلاس form-control-sm لتصغير عنصر <input>.
جرّب بنفسك

Form Size

عمل مقاسات مختلفة لكل عنصر <input>.

HTML 
<form action="/action_page.php">
   <input type="text" class="form-control form-control-lg" placeholder="Large input">
   <input type="text" class="form-control" placeholder="Normal input">
   <input type="text" class="form-control form-control-sm" placeholder="Small input">
</form>
جرّب بنفسك

(inline-form) BootStrap Form Row-Grid الاستمارة الخطية في bootstrap

  • يمكن استخدام كلاسات bootstrap grid التي تحدثنا عنها في الدرس الثالث, وذلك لتحويل عنصر form الى row صف وتحويل العناصر التي بداخله الى columns اعمدة.
  • بهذه الطريقة نستطيع عمل inline form استمارة خطية, اي تظهر عناصرها جمبا الى جمب على خط واحد.
  • لعمل inline form يضاف كلاس row الى عنصر <form> ثم يضاف كلاس col الى كل عنصر داخل الاستمارة لاعطائهم جميعا عرضا متساويا.
  • يتكون كل row من 12 col عمود لذلك بدلا من كلاس col يمكن استخدام كلاس *-col حيث * رقم من 1 الى 12, وهذا في حالة تخصيص عدد اعمدة مختلفة لكل عنصر.
جرّب بنفسك

Inline Form

عمل استمارة خطية باستخدام كلاسات bootstrap grid.

HTML 
<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
  </div>
</form>
جرّب بنفسك

BootStrap Form Validation التحقق من الاستمارة في bootstrap

form validation هي عملية التحقق من وجود بيانات صحيحة داخل كل <input>.


يتم عمل form validation على 3 خطوات:

  • اولا نضيف كلاس was-validated الى عنصر <form>.
  • ثانيا نقوم بانشاء عنصر داخل <form> على سبيل المثال <div> وبداخله الرسالة التي ستظهر للمستخدم في حال كان <input> فارغا او يحتوي على نوع بيانات غير مطابقة لعنصر <input>, ونضيف له كلاس invalid-feedback.
  • ثالثا نقوم بانشاء عنصر اخر بداخله الرسالة التي تظهر عند ملئ عنصر <input> ببيانات صحيحة, ونضيف له كلاس valid-feedback.

الإرسال في هذه المعاينة تجربة محلية؛ لا تُرسل البيانات إلى خادم.

جرّب بنفسك

Form Validation

التحقق من البيانات المدخلة في form inputs.

HTML 
<form action="/action_page.php" class="was-validated">
   <div>
      <label for="uname">Username:</label>
      <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Please fill out this field.</div>
   </div>
</form>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…