يتم اضافة كلاس 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>

جربها بنفسك

معلومات تهمك

لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.

عدد المشاركات

التالى

CLOSETAG

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

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات Bootstrap Forms Bootstrap