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

بوت استرپ دارای فرم هایی سفارشی است که ظاهر زشت و پیش فرض عناصر مرورگر را حذف می کنند. در این قسمت قصد داریم با این فرم های سفارشی در bootstrap آشنا شویم.

Checkbox ها

برای ساخت checkbox سفارشی خود باید به یک عنصر نگهدارنده مانند <div> کلاس های custom-control. و custom-checkbox. را بدهید. سپس کلاس custom-control-input. را به آن input مربوط به checkbox بدهید. اگر برای input خود از label ها استفاده کردید باید به آن label کلاس custom-control-label. را بدهید، همچنین توجه داشته باشید که مقدار for باید با id مربوط به Checkbox یکی باشد. به مثال زیر توجه کنید:

<!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>

</body>
</html>

مشاهده ی خروجی در JSBin

Switch ها

برای ساخت یک toggle switch (دکمه هایی که حالت روشن یا خاموش را نمایش می دهند - رجوع کنید به مثال) باید یک عنصر نگهدارنده با کلاس custom-control. و custom-switch. داشته باشید که درونش یک checkbox قرار داشته باشد. سپس به خود checkbox کلاس custom-control-input. را اضافه کنید. به این مثال توجه کنید:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <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">
  <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>

</body>
</html>

مشاهده ی خروجی در JSBin

Radio button ها

برای ساخت Radio button های بوت استرپ باید یک input از نوع radio button نوشته و به آن کلاس custom-control-input. را بدهید. سپس آن را درون یک عنصر نگهدارنده مانند <div> بگذارید و به <div> کلاس های custom-control. و custom-radio. را دهید. در صورتی که برای radio button های خود label تعیین کردید باید به label موردنظر کلاس custom-control-label. را بدهید. همچنین توجه داشته باشید که مقدار for باید با id مربوط به Radio button یکی باشد. به مثال زیر توجه کنید:

<!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 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>

</body>
</html>

مشاهده ی خروجی در JSBin

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

<!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>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>

</body>
</html>

مشاهده ی خروجی در JSBin

Select Menu ها

برای ایجاد Select Menu ها باید کلاس custom-select. را به <select> بدهید:

<!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 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>

</body>
</html>

مشاهده ی خروجی در JSBin

برای تعیین بزرگی یا کوچکی این select menu ها راه آسانی وجود دارد؛ کلاس custom-select-sm. برای منوهای کوچک و کلاس custom-select-lg. برای منوهای بزرگ است. به این مثال توجه کنید:

<!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 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>

</body>
</html>

مشاهده ی خروجی در JSBin

Range ها

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

<!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 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>

</body>
</html>

مشاهده ی خروجی در JSBin

input دریافت file

برای ساخت input آپلود فایل باز هم یک عنصر نگهدارنده با کلاس custom-file. ایجاد می کنیم و input اصلی را با کلاس custom-control-input. داخل آن می گذاریم. به label های این نوع input نیز باید کلاس custom-control-label. را اضافه کنید.

نکته: اگر می خواهید نام فایل (پس از انتخاب آن برای آپلود) در input نیز ظاهر شود باید کدهای جی کوئری زیر را نیز به آن اضافه کنید:

<!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 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">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>
</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>

</body>
</html>

مشاهده ی خروجی در JSBin

در مثال بالا کدهای جی کوئری نیز اضافه شده اند بنابراین اگر به صفحه ی خروجی مثال بالا در JSBin بروید و فایلی را برای آپلود انتخاب کنید متوجه تغییر نام input خواهید شد.

دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

حامد

06 فروردین 1399

برای سایت های فارسی که چک باکس باید متن سمت چپ باشه باید چیکار کرد؟

امیر زوارمی

13 فروردین 1399

سلام دوست عزیز یا باید خودتون دستی کد های CSS رو تغییر بدید و دوباره استایل نویسی کنید (با دستورات direction: rtl و غیره) یا اینکه از نسخه های فارسی شده ی بوت استرپ استفاده کنید. مثلا آقای مهدی مجیدزاده این کار رو به صورت آماده انجام دادن: https://github.com/MahdiMajidzadeh/bootstrap-v4-rtl

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