فرم های ورودی مختلفی در بوت استرپ وجود دارد ، فرم های ورودی برای گرفتن اطلاعات ورودی مانند نام کاربری ، رمز ، ایمیل و … به کار می‌روند در این آموزش بصورت کامل به نحوه ی ساخت این نوع فرم ها در بوت استرپ خواهیم پرداخت.
پیشنهاد میشود قبل از ورود به جلسه ی بست و دوم آموزش bootstrap قسمت های پیشین را از دوره ی جامع بوت استرپ دنبال کنید ، اگر وقت این کار را ندارید نگران نباشید حدالمکان در این قسمت به قسمت های پیشین اشاره خواهید کرد.
ورودی های مجاز
ورودی های مجاز برای بوت استرپ به شکل زیر می باشد:
- کادر ورودی
- کادر متن
- چک باکس
- دکمه های رادیویی
- دکمه های انتخاب
ورودی های بوت استرپ 4
Bootstrap از انواع ورودی HTML5 پشتیبانی می کند: متن ، گذرواژه ، تاریخ ، زمان محلی ، تاریخ ، ماه ، ساعت ، هفته ، شماره ، ایمیل ، آدرس اینترنتی ، جستجو ، تلفن و رنگ.
توجه: اگر نوع ورودی ها به درستی اعلام نشده باشد ، ورودی ها به طور کامل طراحی نمی شوند!
مثال زیر نشان دهنده ی دو فرم ورودی است ، یکی از آنها فایل متنی یا type=”text” و دیگری type=”password” یا ورودی پسورد است. همانطور که در جلسه ی قبل اشاره کردیم ، برای ساخت فرم باید از کلاس .form-control استفاده شود :
|
1 2 3 4 5 6 7 8 |
<div class="form-group"> <label for="usr">Name:</label> <input type="text" class="form-control" id="usr"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> |
ناحیه ی متنی در بوت استرپ 4
مثال زیر تشکیل دهنده ی ناحیه ی متنی در بوت استرپ 4 است :
|
1 2 3 4 |
<div class="form-group"> <label for="comment">Comment:</label> <textarea class="form-control" rows="5" id="comment"></textarea> </div> |
چک باکس ها در بوت استرپ 4
چک باکس ها هنگامی استفاده میشوند که شما بخواهید برای کاربران خود چندین انتخاب فراهم کنید.
مثال زیر شامل چک باکس است ، چک باکس آخر به عنوان نمونه غیرفعال شده است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 1 </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 2 </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="" disabled="">Option 3 </label> </div> |
برای اطمینان از حاشیه های مناسب برای برچسب ها و جعبه های انتخاب از یک عنصر بسته بندی با class=”form-check” استفاده کنید.
کلاس .form-check-label را به عناصر برچسب اضافه کنید ، و .form-check-input را به کادرهای انتخاب سبک به طور صحیح درون ظرف .form-check بررسی کنید.
اگر می خواهید صندوق های انتخاب در همان خط ظاهر شوند از کلاس .form-check-inline استفاده کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 1 </label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="">Option 2 </label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="" disabled="">Option 3 </label> </div> |
دکمه های رادیویی در بوت استرپ 4
دکمه های رادیویی هنگامی استفاده میشوند که بخواهید کاربر را محدود به انتخاب یک گزینه کنید .
مثال زیر نمونه ای از دکمه های رادیویی است ، همانند مثال بالا دکمه ی آخر غیرفعال است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Option 1 </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Option 2 </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio" disabled="">Option 3 </label> </div> |
اگر می خواهید دکمه های رادیویی در همان خط ظاهر شوند ، از کلاس .form-check-inline استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Option 1 </label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Option 2 </label> </div> <div class="form-check-inline disabled"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio" disabled="">Option 3 </label> </div> |
لیست انتخاب در بوت استرپ 4
کادرهای انتخاب برای انتخاب های چندگانه طراحی شده اند ، به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 |
<div class="form-group"> <label for="sel1">Select list:</label> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div> |
سایز فرم ها
برای استفاده از سایز های مختلف از کلاس های .form-control-sm یا .form-control-lg استفاده میشود.
|
1 2 3 |
<input type="text" class="form-control form-control-sm"> <input type="text" class="form-control form-control"> <input type="text" class="form-control form-control-lg"> |
کنترل فرم با متن ساده
اگر می خواهید قسمت ورودی را به عنوان متن ساده سبک کنید ، از متن .form-control-plain استفاده کنید:
|
1 |
<input type="text" class="form-control-plaintext"> |
فرم کنترل فایل و دامنه تغییرات
کلاس .form-control-range را به ورودی type”range” یا کلاس .form-control-file را به ورودی type”file” اضافه کنید تا دامنه تغییرات یا کنترل کننده ی فایل ایجاد شود.
|
1 2 |
<input type="range" class="form-control-range"> <input type="file" class="form-control-file border"> |
ویدئوی قسمت بیست و دوم
به رسم قسمت های پیشین دوره ی جامع بوت استرپ 4 ، پیشنهاد میکنیم از قسمت های پیشین دوره ی بوت استرپ استفاده کنید و برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.
پایدار باشید.
