ایجاد فرم سفارشی در بوت استرپ

بهاره حسنیبهاره حسنی
438 بازدید
custom forms
[cdb_box_content css=”.vc_custom_1572165490433{background-color: #1e73be !important;}”]

در این بخش میخواهیم به آموزش نحوه ایجاد فرم های سفارشی در بوت استرپ ۴ بپردازیم.

بوت استرپ ۴ دارای عناصر فرم سفارشی است که به منظور جایگزین کردن پیش فرض های مرورگر است.

[/cdb_box_content]

با عرض سلام و وقت بخیر خدمت شما کاربران عزیز سایت پرنیان طرح

با آموزش مبحث فرم های سفارشی در بوت استرپ خدمت شما هستیم.

Custom Checkbox :

برای ایجاد کادر انتخاب سفارشی یک عنصر container را بسته بندی کنید مانند div با یک کلاس custom-control و custom-checkbox برای چک باکس سپس کلاس custom-control-input را داخل input با تایپ checkbox اضافه کنید.

نکته :

اگر از برچسب هایی برای متن همراه استفاده میکنید ، کلاس را به آن اضافه کنید ، توجه داشته باشید که باید مقدار ویژگی با شناسه کادر انتخاب مطاقبت داشته باشد.

مثال :

[php]

<form action=”/action_page.php”>
<div class=”custom-control custom-checkbox mb-3″>
<input type=”checkbox” class=”custom-control-input” id=”customCheck” name=”example1″>
<label class=”custom-control-label” for=”customCheck”>Custom checkbox</label>
</div>
<input type=”checkbox” id=”defaultCheck” name=”example2″>
<label for=”defaultCheck”>Default checkbox</label>
<br>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

خروجی مثال بالا :

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

custom checkbox

Custom Switch :

برای ایجاد toggle switch سفارشی ، یک عنصر container مانند div را با یک کلاس custom-control و custom-switch برای چک باکس و سپس کلاس custom-control-input را به چک باکس اضافه کنید.

برای توضیح بیشتر مثال زیر را ببینید:

[php]

<form action=”/action_page.php”>
<div class=”custom-control custom-switch”>
<input type=”checkbox” class=”custom-control-input” id=”switch1″ name=”example”>
<label class=”custom-control-label” for=”switch1″>Toggle me</label>
</div>
<br>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

خروجی مثال بالا :

switch سفارشی

custom switch

Custom Radio buttons :

برای ایجاد یک دکمه رادیویی سفارشی یک عنصر container را مانند عنصر div با یک کلاس custom-control و custom-radio در اطراف دکمه ی رادیویی بسته بندی کنید.

نکته : 

اگر از برچسب هایی برای متن همراه استفاده میکنید کلاس custom-control-label را به آن اضافه کنید.

مثال :

[php]

<form action=”/action_page.php”>
<div class=”custom-control custom-radio”>
<input type=”radio” class=”custom-control-input” id=”customRadio” name=”example1″>
<label class=”custom-control-label” for=”customRadio”>Custom radio</label>
</div>
<input type=”radio” id=”defaultRadio” name=”example2″>
<label for=”defaultRadio”>Default radio</label>
<br>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

خروجی مثال بالا :

radio button سفارشی

custom radio button

Custom Select Menu :

برای ایجاد یک منوی انتخاب سفارشی کلاس custom-select را به عنصر select اضافه کنید.

مثال :

[php]

<form action=”/action_page.php”>
<select name=”cars” class=”custom-select mb-3″>
<option selected>Custom Select Menu</option>
<option value=”volvo”>Volvo</option>
<option value=”fiat”>Fiat</option>
<option value=”audi”>Audi</option>
</select>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

خروجی مثال بالا :

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

custom select menu

Custom Range :

برای ایجاد یک منوی محدوده ی سفارشی کلاس custom-range را به عنصر input با نوع range اضافه کنید.

مثال :

[php]

<form action=”/action_page.php”>
<label for=”customRange”>Custom range</label>
<input type=”range” class=”custom-range” id=”customRange” name=”points1″>
<label for=”defaultRange”>Default range</label>
<input type=”range” id=”defaultRange” name=”points2″>
<p><button type=”submit” class=”btn btn-primary”>Submit</button></p>
</form>

[/php]

خروجی مثال بالا :

محدوده ی سفارشی

custom range

Custom File Upload :

برای ایجاد بارگزاری پرونده های سفارشی یک عنصر container  را با کلاس custom-file اطراف input با نوع file اضافه کنید.

سپس کلاس custom-file-input را به آن اضافه کنید.

مثال :

[php]

<form action=”/action_page.php”>
<p>Custom file:</p>
<div class=”custom-file mb-3″>
<input type=”file” class=”custom-file-input” id=”customFile” name=”filename”>
<label class=”custom-file-label” for=”customFile”>Choose file</label>
</div>

<p>Default file:</p>
<input type=”file” id=”myFile” name=”filename2″>

<div class=”mt-3″>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</div>
</form>

[/php]

خروجی مثال بالا :

فایل سفارشی

custom file

Rate this post
دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

سبد خرید

سبد خرید شما خالی است.

ورود به سایت