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

بازدید: 507 بازدید
custom forms
[cdb_box_content css=”.vc_custom_1572165490433{background-color: #1e73be !important;}”]

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

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

[/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
دسته بندی آموزش bootstrap
اشتراک گذاری
مقالات مرتبط

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

سبد خرید

هیچ محصولی در سبد خرید نیست.