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

یادگیری Bootstrap

تعداد بازدید : 2722

تاریخ و ساعت انتشار : دو شنبه 23 بهمن 1396 02:06

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

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

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>

مشاهده مثال

دانلود فایل PDF مقاله درس قبلی

نظر شما

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.