ورودیهای فرم
محتویات
- ۱ کنترل های فرم پشتیبانی شده
- ۲ ورودی بوت استرپ
- ۳ فضای متنی (به انگلیسی: Textarea) بوت استرپ
- ۴ چک باکس های بوت استرپ
- ۵ چک باکس های درون خطی (به انگلیسی: Inline)
- ۶ Radio Buttonها در بوت استرپ
- ۷ لیست انتخابی بوت استرپ
- ۸ سایز دهی به کنترل فرم
- ۹ کنترل فرم با متن ساده
- ۱۰ کنترل فرم محدوده (به انگلیسی: Range) و فایل
- ۱۱ منابع آموزشی
کنترل های فرم پشتیبانی شده
بوت استرپ از کنترلهای فرم زیر پشتیبانی میکند:[۱]
- ورودی
- فضای متنی
- چک باکس
- 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">
منابع آموزشی