ورودی‌های فرم

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

کنترل های فرم پشتیبانی شده

بوت استرپ از کنترل‌های فرم زیر پشتیبانی می‌کند:[۱]

  • ورودی
  • فضای متنی
  • چک باکس
  • Radio
  • انتخاب

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

بوت استرپ همهٔ انواع ورودی HTML را پشتیبانی می‌کند: متن، رمز عبور، تاریخ وزمان، تاریخ محلی، تاریخ، ماه، زمان، هفته، عدد، ایمیل، آدرس (به انگلیسی: URL)، جستجو، تلفن و رنگ.

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

مثال زیر دارای دو عنصر ورودی است؛ یکی از type="text" و دیگری از type="password". همان‌طور که در بخش فرم‌ها اشاره کردیم، از کلاس .form-control برای استایل دهی ورودی‌ها با عرض کامل و حاشیه درونی مناسب و غیره استفاده می‌کنیم:

مثال

1 <div class="form-group">
2   <label for="usr">Name:</label>
3   <input type="text" class="form-control" id="usr">
4 </div>
5 <div class="form-group">
6   <label for="pwd">Password:</label>
7   <input type="password" class="form-control" id="pwd">
8 </div>


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


فضای متنی (به انگلیسی: Textarea) بوت استرپ

مثال زیر حاوی یک حوزه متن است:

مثال

1 <div class="form-group">
2   <label for="comment">Comment:</label>
3   <textarea class="form-control" rows="5" id="comment"></textarea>
4 </div>


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


چک باکس های بوت استرپ

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

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

مثال

 1 <div class="form-check">
 2   <label class="form-check-label">
 3     <input type="checkbox" class="form-check-input" value="">Option 1
 4   </label>
 5 </div>
 6 <div class="form-check">
 7   <label class="form-check-label">
 8     <input type="checkbox" class="form-check-input" value="">Option 2
 9   </label>
10 </div>
11 <div class="form-check">
12   <label class="form-check-label">
13     <input type="checkbox" class="form-check-input" value="" disabled>Option 3
14   </label>
15 </div>


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


شرح مثال

از یک عنصر پوشاننده (به انگلیسی: Wrapper) با class="form-check" برای تضمین حاشیه‌های مناسب برای برچسب‌ها و چک باکس‌ها استفاده می‌کنیم:

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

چک باکس های درون خطی (به انگلیسی: Inline)

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

مثال

 1 <div class="form-check-inline">
 2   <label class="form-check-label">
 3     <input type="checkbox" class="form-check-input" value="">Option 1
 4   </label>
 5 </div>
 6 <div class="form-check-inline">
 7   <label class="form-check-label">
 8     <input type="checkbox" class="form-check-input" value="">Option 2
 9   </label>
10 </div>
11 <div class="form-check-inline">
12   <label class="form-check-label">
13     <input type="checkbox" class="form-check-input" value="" disabled>Option 3
14   </label>
15 </div>


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


Radio Buttonها در بوت استرپ

اگر قرار باشد کاربر از بین موارد یک لیست فقط یک مورد را انتخاب کند، از Radio Buttonها استفاده می‌شود.

مثال زیر حاوی سه Radio Button است. آخرین مورد غیرفعال است:

مثال

 1 <div class="form-check">
 2   <label class="form-check-label">
 3     <input type="radio" class="form-check-input" name="optradio">Option 1
 4   </label>
 5 </div>
 6 <div class="form-check">
 7   <label class="form-check-label">
 8     <input type="radio" class="form-check-input" name="optradio">Option 2
 9   </label>
10 </div>
11 <div class="form-check disabled">
12   <label class="form-check-label">
13     <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
14   </label>
15 </div>


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


درست مانند چک باکس‌ها، در صورتیکه می‌خواهید Radio Buttonها در یک خط ظاهر شوند، از کلاس .form-check-inline استفاده کنید:

مثال

 1 <div class="form-check-inline">
 2   <label class="form-check-label">
 3     <input type="radio" class="form-check-input" name="optradio">Option 1
 4   </label>
 5 </div>
 6 <div class="form-check-inline">
 7   <label class="form-check-label">
 8     <input type="radio" class="form-check-input" name="optradio">Option 2
 9   </label>
10 </div>
11 <div class="form-check-inline disabled">
12   <label class="form-check-label">
13     <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
14   </label>
15 </div>


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


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

لیست انتخابی (یک انتخاب):

لیست چند انتخابی (Ctrl یا Shift را نگه دارید (یا با ماوس drag کنید) تا چند آیتم را انتخاب شود):

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

مثال زیر دارای یک لیست کرکره ای (لیست انتخابی) است:

مثال

1 <div class="form-group">
2   <label for="sel1">Select list:</label>
3   <select class="form-control" id="sel1">
4     <option>1</option>
5     <option>2</option>
6     <option>3</option>
7     <option>4</option>
8   </select>
9 </div>


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


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

با استفاده از .form-control-sm یا .form-control-lg می‌توان اندازه کنترل فرم را تغییر دهید:

مثال

1 <input type="text" class="form-control form-control-sm">
2 <input type="text" class="form-control form-control">
3 <input type="text" class="form-control form-control-lg">


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


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

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

مثال

<input type="text" class="form-control-plaintext">


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


کنترل فرم محدوده (به انگلیسی: Range) و فایل

برای استایل دهی به کنترل محدوده یا فیلد فایل با عرض کامل کلاس .form-control-range را به input type"range" یا .form-control-file را به input type"file" اضافه کنید.

مثال

1 <input type="range" class="form-control-range">
2 <input type="file" class="form-control-file border">


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



منابع آموزشی