Bootstrap Forms
الاستمارات في BootStrap
ستتعلم في هذا الدرس التحكم في اي form وفي العناصر التي بداخلها وطريقة عرضهم في المتصفح باستخدام 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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
