Bootstrap Forms
الاستمارات في BootStrap
ستتعلم في هذا الدرس التحكم في اي form وفي العناصر التي بداخلها وطريقة عرضهم في المتصفح باستخدام bootstrap.
التاريخ
06 ديسمبر 2021
الدروس
34
المستوى
العامة
اللغة
انجليزي
المشاهدات
1331
المواضيع
6
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>