Bootstrap

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

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

التاريخ

06 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1130

المواضيع

6
الشروحات chevron_left Bootstrap Forms chevron_left Bootstrap

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

</> 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 لعمل استمارة بعرض الصفحة بالكامل.

<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>
ملاحظة
  • في حالة استخدام color input يتم اضافة تنسيقات bootstrap له باضافة كلاس form-control-color بجوار كلاس form-control.
  • لازالة input border اطار عنصر <input> يتم اضافة كلاس form-control-plaintext بدلا من form-control.

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

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

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

<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.

<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.

<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>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

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

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.