ورودی فرم در Bootstrap ورژن 4

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

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

  • input
  • textarea
  • checkbox
  • radio
  • select

 

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

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

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

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

ورودی
 <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

مثال زیر شامل یک منطقه textarea است:

textarea
 <div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div> 
مشاهده مثال

Checkboxes  در بوت استرپ

در Checkboxes  اگر شما می خواهید کاربر هر تعداد گزینه از یک لیست از گزینه های از پیش تعیین شده را انتخاب کنید استفاده می شود

مثال زیر شامل سه جعبه چک است. آخرین گزینه غیرفعال است:

چک باکس
 <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 disabled">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div> 
مشاهده مثال

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

چک باکس در یک خط
 <div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check form-check-inline disabled">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div> 
مشاهده مثال

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

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

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

دکمه رادیویی
 <div class="radio">
  <label><input type="radio" name="optradio">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> 
مشاهده مثال

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

دکمه رادیویی در یک خط
 <label class="radio-inline"><input type="radio" name="optradio">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> 
مشاهده مثال

 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز