قسمت بیست و دوم bootstrap : نحوه ی ساخت فرم ورودی در بوت استرپ ۴

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت بیست و دوم bootstrap : نحوه ی ساخت فرم ورودی در بوت استرپ ۴

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

23

Calendar-amico (2)

تاریخ انتشار:

9 , اردیبهشت , 1399

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

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

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

ورودی های مجاز

ورودی های مجاز برای بوت استرپ به شکل زیر می باشد:

  • کادر ورودی
  • کادر متن
  • چک باکس
  • دکمه های رادیویی
  • دکمه های انتخاب

ورودی های بوت استرپ ۴

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

توجه: اگر نوع ورودی ها به درستی اعلام نشده باشد ، ورودی ها به طور کامل طراحی نمی شوند!

مثال زیر نشان دهنده ی دو فرم ورودی است ، یکی از آنها فایل متنی یا type=”text” و دیگری type=”password” یا ورودی پسورد است. همانطور که در جلسه ی قبل اشاره کردیم ، برای ساخت فرم باید از کلاس .form-control استفاده شود :

ناحیه ی متنی در بوت استرپ ۴

مثال زیر تشکیل دهنده ی ناحیه ی متنی در بوت استرپ ۴ است :

چک باکس ها در بوت استرپ ۴

چک باکس ها هنگامی استفاده میشوند که شما بخواهید برای کاربران خود چندین انتخاب فراهم کنید.

مثال زیر شامل چک باکس است ، چک باکس آخر به عنوان نمونه غیرفعال شده است:

برای اطمینان از حاشیه های مناسب برای برچسب ها و جعبه های انتخاب از یک عنصر بسته بندی با class=”form-check” استفاده کنید.

کلاس .form-check-label را به عناصر برچسب اضافه کنید ، و .form-check-input را به کادرهای انتخاب سبک به طور صحیح درون ظرف .form-check بررسی کنید.

اگر می خواهید صندوق های انتخاب در همان خط ظاهر شوند از کلاس .form-check-inline استفاده کنید:

دکمه های رادیویی در بوت استرپ ۴

دکمه های رادیویی هنگامی استفاده میشوند که بخواهید کاربر را محدود به انتخاب یک گزینه کنید .

مثال زیر نمونه ای از دکمه های رادیویی است ، همانند مثال بالا دکمه ی آخر غیرفعال است:

اگر می خواهید دکمه های رادیویی در همان خط ظاهر شوند ، از کلاس .form-check-inline استفاده کنید.

لیست انتخاب در بوت استرپ ۴

کادرهای انتخاب برای انتخاب های چندگانه طراحی شده اند ، به مثال زیر توجه کنید:

سایز فرم ها

برای استفاده از سایز های مختلف از کلاس های .form-control-sm یا .form-control-lg استفاده میشود.

کنترل فرم با متن ساده

اگر می خواهید قسمت ورودی را به عنوان متن ساده سبک کنید ، از متن .form-control-plain استفاده کنید:

فرم کنترل فایل و دامنه تغییرات

کلاس .form-control-range را به ورودی type”range” یا کلاس .form-control-file را به ورودی type”file” اضافه کنید تا دامنه تغییرات یا کنترل کننده ی فایل ایجاد شود.

به رسم قسمت های پیشین دوره ی جامع بوت استرپ ۴ ، پیشنهاد میکنیم از قسمت های پیشین دوره ی بوت استرپ استفاده کنید و برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.

پایدار باشید.

مرتضی افضلی

مرتضی افضلی

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

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

0 پاسخ به "قسمت بیست و دوم bootstrap : نحوه ی ساخت فرم ورودی در بوت استرپ ۴"

    ارسال یک پیام

    نشانی ایمیل شما منتشر نخواهد شد.