شروع پرقدرت آموزش HTML و CSS [ ورود به دنیای هیجان انگیز وب! ]

30% تخفیف برای مدت محدود!

فرم‌ در بوت‌استرپ | آموزش طراحی عناصر برای انواع فرم‌ها در Bootstrsp 4


نویسنده:
شنبه ۱ آذر ۱۳۹۹
فرم در بوت‌استرپ

در این بخش از آموزش رایگان Bootstrap 4، با نحوه کار با کلاس‌های فرم‌ در بوت‌استرپ آشنا خواهیم شد. با استفاده از کدها و عناصر موجود در بوت‌استرپ می‌توان، فرم‌ها را با چیدمان‌های گوناگونی در صفحه وب خود قرار دهید.

فرم‌ها در بوت‌استرپ

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

تنظیمات پیش‌فرض فرم

تنظیمات پیش‌فرض فرم به این صورت می‌باشد:

تمام <input>‌های متنی، <textarea> و عناصر <select> با کلاس form-control. دارای پهنای (عرض) 100% هستند.

آرایش فرم‌ها در بوت‌استرپ

فرم‌ در بوت‌استرپ سه نوع آرایش دارد که به صورت زیر تعریف شده است :

  • فرم‌های انباشته (تمام عرض)
  • فرم‌های Inline ( درون‌خطی)
  • فرم‌های افقی

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

  • برچسب‌ها و همه‌ی کنترل‌های فرم را در <“div class=”form-group> قرار می‌گیرد.
  • کلاس form-control. را به عناصر متنی از جمله <input> ،<textarea> و <select> اضافه کنید.

فرم‌های Stacked (تمام عرض)

در تصویر زیر یک فرم stacked را مشاهده می‌کنید.

فرم‌ در بوت‌استرپ

برای ساخت یک فرم تمام عرض نیاز به input ،checkbox و دکمه submit دارید. هنگام طراحی این نوع فرم‌ها برای اینکه marginها در صفحه وب به‌هم نریزد، هر کدام از عناصر فرم را در یک عنصر نگهدارنده با کلاس form-group. قرار می‌دهیم:

فرم‌های inline

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

فرم‌ در بوت‌استرپ

برای ساخت فرم inline باید کلاس form-inline. را به عنصر <form> اضافه کنید. برای مثال در کد زیر دو عدد input، یک checkbox و یک دکمه ی submit وجود دارد:

فرم‌های افقی

در یک فرم افقی در صفحه‌ نمایشگرهای متوسط وبزرگ، هر برچسب در کنار یک عنصر Input به صورت افقی قرار می‌گیرد. اما در صفحه نمایش‌هایی با عرضی کوچک‌تر از 767 پیکسل، فرم‌های افقی به فرم‌های عمودی تبدیل می‌شوند. برای ایجاد فرم‌های افقی، کلاس form-horizontal. را به عنصر <form> و کلاس control-label. را به تمام عناصر <label> اضافه کنید.

اعتبارسنجی فرم‌ها

حتما شما هم هنگامی‌که در حال پر کردن فرمی در وب‌سایتی هستید، اعلانی مبنی بر اشتباه پر کردن آن دریافت کرده‌اید. شما برای اینکار می‌توانید از کلاس‌های اعتبارسنجی مختلفی در وب‌سایتتان استفاده کنید تا بتوانید اشتباهات کاربران را در هنگام پر کردن فرم‌ها به آن‌ها متذکر شوید.

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

اعتبار سنجی فرم ها

کلاس was-validated. را به عنصر <form> اضافه کنید. این کد، فرم را هنگام ورود داده‌ها اعتبارسنجی می‌کند. در این صورت قبل از ثبت فرم، اشتباهاتی که کاربر مرتکب شده‌است را می‌توان به او متذکر شد:

زمانی‌که کلاس needs-validation را به عنصر <form> اضافه کنید، پس از ثبت داده‌ها آن را اعتبارسنجی خواهد کرد:

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

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