ورود به کارتابل مشتریان وب مهراز
ورودی فرم در Bootstrap ورژن 4
یادگیری Bootstrapفرم کنترلی پشتیبانی شده
بوت استرپ از کنترل های فرم زیر پشتیبانی می کند:
- 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 است:
<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>
نظر شما
>