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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

کنترل های پشتیانی شده

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

  • input
  • textarea
  • checkbox
  • radio
  • select

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

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

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

مثال زیر دارای دو عنصر ورودی است؛ یکی ار نوع متن و یکی از نوع رمز عبور:

مثال

<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>


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


حوزه متن (Textarea) در بوت استرپ

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

مثال

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


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


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

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

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

مثال

<div class="checkbox">
  <label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>Option 3</label>
</div>


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


از کلاس .checkbox-inline برای قرار دادن چک باکس‌ها در یک خط استفاده کنید:


مثال

<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>


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


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

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

مثال زیر حاوی سه Radio Button است. اولین مورد بطور پیش فرض انتخاب شده (Checked) است و آخرین مورد غیرفعال است.

مثال

<div class="radio">
  <label><input type="radio" name="optradio" checked>Option 1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Option 3</label>
</div>


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


در صورتیکه می‌خواهید Radio Butoonها در یک خط ظاهر شوند، از کلاس .radio-inline استفاده کنید:


مثال

<label class="radio-inline"><input type="radio" name="optradio" checked>Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>


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


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

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

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

مثال

<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>


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


منابع آموزشی