در این بخش میخواهیم به آموزش نحوه ایجاد فرم های سفارشی در بوت استرپ 4 بپردازیم.
بوت استرپ 4 دارای عناصر فرم سفارشی است که به منظور جایگزین کردن پیش فرض های مرورگر است.
با عرض سلام و وقت بخیر خدمت شما کاربران عزیز سایت پرنیان طرح
با آموزش مبحث فرم های سفارشی در بوت استرپ خدمت شما هستیم.
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 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]
خروجی مثال بالا :
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]
خروجی مثال بالا :
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 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 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]
خروجی مثال بالا :