سلام برنامه | HiProgram

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه بیست و سوم (Custom Forms)

آموزش Bootstrap 4 جلسه بیست و سوم (Custom Forms) از سری آموزش های تک قسمتی است.

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

در آموزش های قبلی درباره ساخت فرم ها صحبت کردیم در این جلسه قصد داریم سفارشی سازی آنها و بهتر کردن ظاهر آنها را خدمتتان توضیح دهیم . مواردی که این جلسه قصد داریم به آن بپردازیم را برای شما لیست میکنیم و در ادامه ی آمورزش هر کدام را توضیح میدهیم:

• Custom Checkbox
• Custom Switch
• Custom Radio buttons
• Inline Custom Form Controls
• Custom Select Menu
• Custom Select Menu Size
• Custom Range
• Custom File Upload

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

در حالت عادی برای ساخت چک باکس کافی بود input با type از نوع checkbox بسازید اما برای سفارشی کردن آن باید از کلاس ثابت custom-control در یک div استفاده کنیم و input و label را داخل آن قرار دهیم . همچنین در کنار کلاس قبلی برای ساخت چک باکس باید کلاس custom-checkbox را قرار دهیم و در نهایت باید کلاس custom-control-input را به input اختصاص دهیم برای واضح شدن موضوع میتوانید از کد زیر استفاده کنید:

<form>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
    <label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
  </div>
</form>

ساخت سوئیچ سفارشی

از سوئیچ ها در موارد زیادی استفاده میشود حتی به این سوئیچ ها کلید دو حالته نیز گفته میشود که میتوانید برای ۲ شرط مختلف یا ۲ حالت مختلف از آن استفاده کنید برای ساخت این سوئیچ کافیست مجددا div با کلاس ثابت custom-control بسازید و input و label را داخل آن قرار دهید سپس در کنار همین کلاس custom-switch را اضافه کنید و کلاس custom-control-input را به input خود بدهید و در نهایت کلاس custom-control-label را به label خود بدهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<form>
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="switch1">
    <label class="custom-control-label" for="switch1">Toggle me</label>
  </div>
</form>

ساخت رادیو سفارشی

قبلا درباره ساخت و نحوه ساخت radio صحبت کردیم حال میخواهیم درباره سفارشی کردن آن صحبت کنیم. برای ساخت رادیو سفارشی باید در کنار کلاس ثابت custom-control که در موارد قبل هم از آن یاد کردیم کلاس custom-radio را قرار دهید و سپس کلاس custom-control-input را به input و کلاس custom-control-label را به label بدهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<form>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio</label>
  </div> 
</form>

ساخت فرم سفارشی خطی

برای ساخت فرم های خطی سفارشی کافیست در کنار کلاس custom-control کلاس custom-control-inline را قرار دهید به همین راحتی میتوانید هر چند المانی که میخواهید در کنار هم قرار دهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<form>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio 1</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio2">Custom radio 2</label>
  </div> 
</form>

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

قبلا درباره ساخت حالت ساده این منو ها صحبت کردیم حال به شما آموزش میدهیم که چطور آنها را سفارشی کنید کافیست برای این کار کلاس custom-select را به div اختصاص دهید و باقی موارد مانند ساخت حالت ساده است برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<form>
  <select name="cars" class="custom-select">
    <option selected>Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

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

ما برای المان های خود طبق معمول ۳ سایز داریم یکی کوچک یکی حالت پیشفرض و یکی حالت بزرگ برای ساخت حالت پیشفرض نیاز به انجام کاری نیست و حالت عادی است برای سایز کوچک کافیست کلاس custom-select-sm را به select خود اضافه کنید و اگر سایز بزرگ را میخواهید کلاس custom-select-lg را قرار دهید برای واضح شدن موضوع از کد زیر کمک بگیرید:

<form>
  <!-- Small -->
  <select name="cars" class="custom-select-sm">
    <option selected>Small Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>

  <!-- Large -->
  <select name="cars" class="custom-select-lg">
    <option selected>Large Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

ساخت range سفارشی

برای ساخت رنج سفارشی کافیست کلاس custom-range را به input خود که type از نوع range دارد بدهید و به همین راحتی آن را به صورت سفارشی در بیاورید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

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

ساخت باکس آپلود فایل سفارشی

برای ساخت باکس آپلود شما نیاز به input با type از نوع file دارید حال برای سفارشی کردن آن باید input و label خود را در داخل div با کلاس custom-file قرار دهید و کلاس custom-file-input را به input خود بدهید و در نهایت کلاس custom-file-label را به label خود بدهید برای اجرای این مورد نیاز به قطعه کد جیکوئری نیز هست که در کد برای شما قرار میدهیم:

<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>

<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>

برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>


  <div class="container mt-3">
  <h2>Custom Checkbox</h2>
  <p>To create a custom checkbox, wrap a container element, like div, with a class of .custom-control and .custom-checkbox around the checkbox. Then add the .custom-control-input to the checkbox.</p>
  <p><strong>Tip:</strong> If you use labels for accompanying text, add the .custom-control-label class to it. Note that the value of the for attribute should match the id of the checkbox:</p>
  <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>
</div>



----------------------------------------------------------------------------

    
<div class="container">
  <h2>Custom Switch</h2>
  <p>To create a custom "toggle switch", wrap a container element, like div, with a class of .custom-control and .custom-switch around a checkbox. Then add the .custom-control-input class to the checkbox:</p>
                                        
  <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>
</div>



----------------------------------------------------------------------------
<div class="container mt-3">
  <h2>Custom Radio Buttons</h2>
  <p>To create a custom radio button, wrap a container element, like div, with a class of .custom-control and .custom-radio around the radio button. Then add the .custom-control-input to the radio button.</p>
  <p><strong>Tip:</strong> If you use labels for accompanying text, add the .custom-control-label class to it. Note that the value of the for attribute should match the id of the radio:</p>
  <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>
</div>


----------------------------------------------------------------------------
<div class="container mt-3">
  <h2>Inline Custom Form Controls</h2>
  <p>If you want the custom form controls to sit side by side (inline), add the .custom-control-inline to the wrapper/container:</p>
  <form action="/action_page.php">
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="customRadio1" name="example1">
      <label class="custom-control-label" for="customRadio1">Custom radio</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="customRadio2" name="example2">
      <label class="custom-control-label" for="customRadio2">Custom radio</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>


----------------------------------------------------------------------------
<div class="container mt-3">
  <h2>Custom Select Menu</h2>
  <p>To create a custom select menu, add the .custom-select class to the select element:</p>
  <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>
</div>

----------------------------------------------------------------------------
<div class="container mt-3">
  <h2>Custom Select Menu Sizing</h2>
  <p>Use the .custom-select-sm class to create a small select menu and the .custom-select-lg class for a large one:</p>
  <form>
    <select class="custom-select custom-select-sm mb-3">
      <option selected>Small Custom Select Menu</option>
      <option value="volvo">Volvo</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <select name="cars" class="custom-select mb-3">
      <option selected>Default Custom Select Menu</option>
      <option value="volvo">Volvo</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    <select name="cars" class="custom-select custom-select-lg mb-3">
      <option selected>Large Custom Select Menu</option>
      <option value="volvo">Volvo</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
  </form>
</div>

----------------------------------------------------------------------------
<div class="container mt-3">
  <h2>Custom Range</h2>
  <p>To create a custom range menu, add the .custom-range class to the input element with type="range":</p>
  <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>
</div>
----------------------------------------------------------------------------
<div class="container mt-3">
  <h2>Custom File</h2>
  <p>To create a custom file upload, wrap a container element with a class of .custom-file around the input with type="file". Then add the .custom-control-input to it:</p>
  <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">ورود</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>
</div>

<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>

<br>
</body>
</html>

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group)

آموزش Bootstrap 4 جلسه بیست و چهارم (Carousel)

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.