فرم‌های سفارشی

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

بوت استرپ ۴ عناصر فرم شخصی سازی شده دارد که بمنظور جایگزین کردن پیش فرض مرورگر ایجاد شده‌اند:[۱]

چک باکس سفارشی

برای ایجاد چک باکس سفارشی، آن را داخل یک عنصر ظرف مانند <div> با کلاس .custom-control و .custom-checkbox قرار دهید. سپس .custom-control-input به ورودی با type="checkbox" اضافه کنید.

نکته: اگر برای متن‌ها از برچسب استفاده می‌کنید، کلاس .custom-control-label را به آن اضافه کنید. دقت کنید که مقدار ویژگی باید با id چک باکس مطابقت داشته باشد.

مثال

1 <form>
2   <div class="custom-control custom-checkbox">
3     <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
4     <label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
5   </div>
6 </form>


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


سوئیچ سفارشی

برای ایجاد یک “toggle switch” سفارشی، چک باکس را داخل یک عنصر ظرف، مانند <div> ، با کلاس .custom-control و .custom-switch قرار دهید. سپس کلاس .custom-control-input را به چک باکس اضافه کنید:

مثال

1 <form>
2   <div class="custom-control custom-switch">
3     <input type="checkbox" class="custom-control-input" id="switch1">
4     <label class="custom-control-label" for="switch1">Toggle me</label>
5   </div>
6 </form>


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


Radio Buttonهای سفارشی

برای ایجاد یک radio button، آن را داخل یک عنصر ظرف، مانند <div>، با کلاس .custom-control و .custom-radio قرار دهید. سپس کلاس .custom-control-input را به ورودی با type="radio" اضافه کنید.

نکته: اگر برای متن‌ها از برچسب استفاده می‌کنید، کلاس .custom-control-label را به آن اضافه کنید. دقت کنید که مقدار ویژگی باید با id مربوط به radio button مطابقت داشته باشد.

مثال

1 <form>
2   <div class="custom-control custom-radio">
3     <input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
4     <label class="custom-control-label" for="customRadio">Custom radio</label>
5   </div>
6 </form>


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


کنترل های فرم درون خطی سفارشی

اگر می‌خواهید کنترل‌های فرم کنار هم قرار بگیرند (به انگلیسی: inline), کد .custom-control-inline را به ظرف/wrapper اضافه کنید:

مثال

 1 <form>
 2   <div class="custom-control custom-radio custom-control-inline">
 3     <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
 4     <label class="custom-control-label" for="customRadio">Custom radio 1</label>
 5   </div>
 6   <div class="custom-control custom-radio custom-control-inline">
 7     <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
 8     <label class="custom-control-label" for="customRadio2">Custom radio 2</label>
 9   </div>
10 </form>


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


منوی انتخاب سفارشی

برای ایجاد منوی سفارشی، کلاس .custom-select را به یک عنصر <select> اضافه کنید:

مثال

1 <form>
2   <select name="cars" class="custom-select">
3     <option selected>Custom Select Menu</option>
4     <option value="volvo">Volvo</option>
5     <option value="fiat">Fiat</option>
6     <option value="audi">Audi</option>
7   </select>
8 </form>


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


اندازه منوی انتخاب سفارشی

از کلاس .custom-select-sm برای ایجاد منوی انتخاب کوچک و از کلاس .custom-select-lg برای ایجاد منوی انتخاب بزرگ استفاده کنید:

مثال

 1 <form>
 2   <!-- Small -->
 3   <select name="cars" class="custom-select-sm">
 4     <option selected>Small Custom Select Menu</option>
 5     <option value="volvo">Volvo</option>
 6     <option value="fiat">Fiat</option>
 7     <option value="audi">Audi</option>
 8   </select>
 9 
10   <!-- Large -->
11   <select name="cars" class="custom-select-lg">
12     <option selected>Large Custom Select Menu</option>
13     <option value="volvo">Volvo</option>
14     <option value="fiat">Fiat</option>
15     <option value="audi">Audi</option>
16   </select>
17 </form>


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


Range سفارشی

برای ایجاد منوی range سفارشی، کلاس .custom-range را به یک ورودی با type=”<range>” اضافه کنید:

مثال

1 <form>
2   <label for="customRange">Custom range</label>
3   <input type="range" class="custom-range" id="customRange" name="points1">
4 </form>


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


بارگذاری فایل سفارشی

برای ایجاد آپلود فایل سفارشی، ورودی با type=”file” را داخل یک ظرف با کلاس .custom-file قرار دهید. سپس .custom-file-input را به ورودی اضافه کنید.

نکته: اگر برای متن‌ها از برچسب استفاده می‌کنید، کلاس .custom-file-label را به آن اضافه کنید. دقت کنید که مقدار ویژگی باید با id چک باکس مطابقت داشته باشد.

دقت کنید اگر می‌خواهید هنگام انتخاب یک فایل خاص، نام آن نمایش داده شود، باید کد jQuery را نیز اضافه کنید:

مثال

 1 <form>
 2   <div class="custom-file">
 3     <input type="file" class="custom-file-input" id="customFile">
 4     <label class="custom-file-label" for="customFile">Choose file</label>
 5   </div>
 6 </form>
 7 
 8 <script>
 9 // Add the following code if you want the name of the file appear on select
10 $(".custom-file-input").on("change", function() {
11   var fileName = $(this).val().split("\\").pop();
12   $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
13 });
14 </script>


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



منابع آموزشی