نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه بیستم (form)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه بیستم (form)

آموزش Bootstrap 4 جلسه بیستم (form) از سری آموزش های تک قسمتی است.

 

ساخت فرم ساده

یکی از مباحث مهم در طراحی سایت فرم ها هستند تقریبا همه سایت ها دارای فرم هستند اما چیدمان این فرم ها و نحوه اعتبار سنجی آن ها مورد مهمی است که این جلسه به کمک بوت استرپ ۴ به آن میپردازیم.

برای یک فرم ساده به چند تگ نیاز داریم تگ form و input و label و button و بعد از آن به کلاس های بوت استرپ برای نمایش و اعتبارسنجی آن ها .تمام فرم ما باید داخل تگ from باشد بعد از آن هر input نیاز به یک label دارد که عنوان آن است پس نیاز به یک div با کلاس form-group داریم که label و input را داخل آن قرار دهیم.به input خود کلاس form-control را میدهیم و یک id با نام دلخواه به آن میدهیم که این نام دلخواه را باید به attribute با نام for بدهیم .

اگر قصد دارید دکمه چک را نیز قرار دهید باید در کنار کلاس form-group در تگ div کلاس form-check را نیز قرار دهید.همچنین نیاز به کلاس form-check-label در تگ label نیز دارید و به تگ input نیز باید کلاس form-check-input بدهید. برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

ساخت فرم خطی

فرمی که در مرحله قبل ساختیم هر فیلد آن در خطی مجزا بود اما اگر بخواهیم کل فرم را در یک خط قرار بدهیم باید از کلاس های بوت استرپ استفاده کنیم برای اینکار باید کلاس form-inline را به تگ form خود بدهیم با همین کلاس ساده میتوانیم فرم های خود را در قالب خطی نمایش دهیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

ساخت فرم خطی مرتب

در فرم خطی بالا که آموزش دادیم المان ها کاملا به هم چسبیده هستند اگر قصد دارید این المان ها را مرتب کنید میتوانید از ۲ کلاس استفاده کنید یکی برای تنظیم بالا و پایین بودن فیلد ها و یکی فاصله چپ و راست آنها کلاس mb-2 برای بالا و پایین و کلاس mr-sm-2 برای چپ و راست کردن فاصله المان ها برای واضح شدن موضوع شما میتوانید از کد زیر کمک بگیرید:

 

اعتبارسنجی فرم ها به کمک کلاس بوت استرپ

شما میتوانید به کمک کلاس های بوت استرپ به راحتی در لحظه فرم ها را اعتبارسنجی کنید .شما برای این کار به زبان برنامه نویسی دیگری نیاز ندارید.کافیست در تگ form خود کلاس was-validated را قرار دهید و به input های خود کد required را اضافه کنید این کد برای اجباری شدن لازم است چرا که تا فیلدی اجباری نشود امکان اعتبارسنجی آن وجود ندارد. ما ۲ پیغام داریم که در صورت درست یا نادرست بودن اعتبار نمایش داده میشود پیغام درست را در div با کلاس valid-feedback و پیغام نادرست را در div با کلاس invalid-feedback قرار میدهیم. به همین راحتی میتوانیم فیلد ها را اعتبارسنجی کنیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

اعتبارسنجی بعد از ارسال درخواست

در قسمت قبلی به کمک کلاس های بوت استرپ و در لحظه اعتبارسنجی را انجام دادیم حال میخواهیم اعتبارسنجی بعد از ارسال را انجام دهیم برای این کار به تگ form باید کلاس needs-validation را اضافه کنیم همچنین لازم است مقدار novalidate را نیز در تگ قرار دهیم باقی موارد مانند قسمت قبل است با این تفاوت که در این حالت ما باید از اسکریپت استفاده کنیم برای راحتی شما در کد زیر اسکریپت را قرار داده ایم :

 

آموزش فرم در اینجا به پایان میرسد

نکته این آموزش ۲ روش اعتبارسنجی بود:

  • اعتبارسنجی در لحظه : was-validated
  • اعتبارسنجی بعد ارسال : needs-validation

برای راحتی شما عزیزان کد کل موارد آموزش را قرار میدهیم:

 

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه نوزدهم (Navbar)

آموزش Bootstrap 4 جلسه بیست و یکم (Input)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:

 

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (3 رای, میانگین: 4٫67 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه بیستم (form): نوع فایل:mp4 حجم فایل:31.40 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.