آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کار با فرم Form در Bootstrap 4

دوره های مرتبط با این مقاله

آموزش کار با فرم Form در Bootstrap 4:

بوت استرپ 4، کلاس ها و امکانات ویژه ای برای کار با فرم ها (تگ <form>) فراهم کرده است.

کنترل های درون تگ Form در بوت استرپ 4، به صورت خودکار کلیه ی استایل عمومی را دریافت می کند. برای مثال کلیه کادرهای متن در فرم ها مثل تگ <input>، تگ <teatarea> و تگ <select> در صورت دریافت کلاس form control، عرضی برابر 100 درصد خواهند داشت.

بوت استرپ 4 دو نوع قالب یا layout در نمایش اجرای فرم به کار می برد :

1-حالت تمام عرض برای هر کنترل (stacked full width) : در این حالت، کنترل های فرم بر روی هم و با عرض 100 درصد صفحه یا عنصر دربرگیرنده، نمایش داده می شوند.

2- حالت درون خطی (inline form): در این حالت کنترل های فرم در کنار هم و در یک خط، حالت چپ چین نمایش داده می شوند.

آموزش حالت تمام عرض در فرم های بوت استرپ 4:

آموزش حالت تمام عرض در فرم های بوت استرپ 4

در کد مثال عملی زیر، یک فرم بوت استرپ با 2 کنترل ورودی کادر متن، یک دکمه checkbox و یک دکمه ارسال submit button ایجاد کرده ایم که در حالت تمام عرض (full width) نمایش داده می شوند.

برای اطمینان از نمایش درست کنترل ها و رعایت مارجین و Padding، هر کنترل را درون یک عنصر دربرگیرنده با کلاس form-group قرار دهید :

مثال 1


  
امتحان کنید

آموزش حالت درون خطی inline form در بوت استرپ 4:

آموزش حالت درون خطی inline form در بوت استرپ 4

در حالت نمایش درون خطی (inline form)، تمامی کنترل ها در یک خط و با حالت پیش فرض چپ چین نمایش داده می شوند.

نکته :

حالت inline فقط در صفحه نمایش های بزرگتر از عرض 576 پیکسل کار می کند. در صفحات موبایلی و کمتر از عرض 576 پیکسل، به صورت خودکار فرم ها به صورت تمام عرض و هر کنترل در یک خط نمایش داده می شود.

برای نمایش المنت های فرم به صورت درون خطی در Bootstrap 4، بایستی کلاس form-inline. را به تگ <form> اضافه نمایید.

مثال عملی : در کد مثال عملی زیر، دو کنترل کادر متن، یک chechbox و دکمه ارسال submit را در یک فرم به صورت خطی (inline) نمایش داده ایم :

مثال 2

امتحان کنید

آموزش چیدمان بهتر کنترل ها در حالت inline با استفاده از کلاس های کمکی utilities بوت استرپ 4:

کنترل های فرم در مثال آموزشی قبلی، بسیار به هم چسبیده و فشرده هستند. شما می توانید از کلاس های کمکی بوت استرپ (utility classes) برای چیدمان بهتر این کنترل ها در فرم استفاده کنید.

مثلا در کد مثال زیر، از کلاس کمکی mr-sm-2. استفاده کرده ایم که در تمامی دستگاه و اندازه های صفحه نمایش، یک مارجین راست 2 پیکسلی را به تمامی کنترل ها می دهد.

همچنین کلاس کمکی mb-2.، در صورتی که کنترل ها در حالت stacked و بر روی هم قرار بگیرند (به دلیل عرض کم جهت نمایش همه آن ها در یک خط)، یک مارجین زیر (bottom margin) به اندازه 2 پیکسل را به همه کنترل ها اضافه کردند. برای درک بهتر به خروجی و کد مثال دقت نمایید :

مثال 3

امتحان کنید
راهنمایی :

راهنمایی : به طور کامل در بخش آموزش کلاس های کمکی (Bootstrap 4 utilities classes) به آموزش استفاده از این کلاس ها خواهیم پرداخت.

آموزش اعتبارسنجی فرم ها (Form Validation) در Bootstrap 4:

در بوت استرپ 4، می توانید از کلاس اعتبارسنجی (Validation Classes) برای ارسال فیدبک های چک کردن اطلاعات وارد شده در فرم، به کاربر، استفاده کنید.

می توانید کلاس های was-validated یا needs-validation را به المنت form اضافه کرده، بسته به این که بخواهید فرم را قبل یا بعد از زدن دکمه ارسال یا submit، چک کرده و پیام های اعتبارسنجی را به کاربر نشان دهید.

در صورت ورود اطلاعات درست در هر کادر متن یا input فرم، کنترل دارای خطوط حاشیه سبز (valid) و در صورت ورود اطلاعات اشتباه یا عدم ورود اطلاعات لازم، دارای خطوط حاشیه قرمز (invalid) خواهد بود.

همچنین می توانید از المنت هایی با کلاس valid-feedback یا invalid-feedback برای اعلام دقیق پیام خطا به کاربر و یا اعلام اینکه چه چیزی فراموش شده یا نادرست است، استفاده کنید.

مثال عملی : در کد مثال عملی زیر، تمامی موارد گفته شده فوق را در عمل به کار برده ایم. در این کد از کلاس was-validated استفاده کرده ایم که اطلاعات را قبل از ارسال و زدن دکمه submit، چک خواهد کرد :

مثال 4

Valid.
Please fill out this field.
Valid.
Please fill out this field.
امتحان کنید
  • 126
  •    56
  • تاریخ ارسال :   1398/08/02

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .