فرم ها در بوت استرپ

تمام عناصر فرم ها در بوت استرپ استایل دهی شده اند. بنابراین باید بدانید این استایل ها به چه شکل هستند. تمام <input> های متنی و <textarea> و عناصر <select> ای که کلاس form-control. را داشته باشند عرض 100 درصد می گیرند.

در واقع بوت استرپ دو نوع فرم به شما ارائه می دهد: فرم های inline و فرم های stacked به معنی انباشته (تمام عرض صفحه را می گیرند).

فرم های stacked

مثال زیر یک فرم stacked می سازد که دو عدد input، یک checkbox و یک دکمه ی submit دارد. همچنین برای اطمینان از اینکه margin ها دست نخورند و صفحه به هم نریزد، هر کدام از عوامل فرم ها (input ها، checkbox ها و ...) را در یک عنصر نگهدارنده با کلاس form-group. قرار داده ایم:

<!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">
  <h2>Stacked form</h2>
  <form action="/action_page.php">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
    </div>
    <div class="form-group form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="remember"> Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>

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

فرم های inline

در فرم های inline عوامل فرم روی هم قرار نمی گیرند، بلکه همه از سمت چپ (به طور پیش فرض) چیده می شوند. البته نکته ای بسیار مهم را در ذهن داشته باشید؛ از آن جا که بوت استرپ واکنش گراست، کنار هم قرار گرفتن عوامل فرم به شرطی اجرایی می شود که عرض صفحه از 576px کمتر نشود. اگر عرض صفحه ای کمتر از 576px باشد، تمامی عوامل فرم مانند input ها روی هم قرار خواهند گرفت.

برای ساخت این فرم ها باید کلاس form-inline. را به عنصر <form> اضافه کنید؛ به طور مثال در کد زیر دو عدد input، یک checkbox و یک دکمه ی submit داریم:

<!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">
  <h2>Inline form</h2>
  <p>Make the viewport larger than 576px wide to see that all of the form elements are inline and left-aligned. On small screens, the form groups will stack horizontally.</p>
  <form class="form-inline" action="/action_page.php">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
    <div class="form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="remember"> Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>

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

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

البته اگر به خروجی کد بالا نگاه کنید متوجه خواهید شد که فرم ما به هم چسبیده و فشرده است. اگر از جداکننده های بوت استرپ استفاده کنید، ظاهر فرم بسیار بهتر می شود. به طور مثال کد زیر (قسمت mr-sm-2.) به هر input از سمت راست margin مشخصی اضافه کرده و قسمت mb-2. نیز margin پایین را مشخص می کند. دلیل اینکه برای فرم margin پایین قرار می دهیم این است که اگر فرم از قسمتی شکست و بعضی محتویات آن به خط بعدی منتقل شد به عناصر بالای سرش نچسبد. مثال:

<!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">
  <h2>Inline form</h2>
  <p>Make the viewport larger than 576px wide to see that all of the form elements are inline and left-aligned. On small screens, the form groups will stack horizontally.</p>
  <form class="form-inline" action="/action_page.php">
    <label for="email2" class="mb-2 mr-sm-2">Email:</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="email2" placeholder="Enter email" name="email">
    <label for="pwd2" class="mb-2 mr-sm-2">Password:</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="pwd2" placeholder="Enter password" name="pswd">
    <div class="form-check mb-2 mr-sm-2">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" name="remember"> Remember me
      </label>
    </div>    
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
  </form>
</div>

</body>
</html>

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

اعتبار سنجی فرم ها

شما می توانید از کلاس های اعتبار سنجی مختلفی استفاده کنید تا اشتباهات کاربران در هنگام پر کردن فرم ها را به آن ها متذکر شوید. برای این کار، کلاس was-validated. یا کلاس needs-validation را به عنصر <form> اضافه کنید؛ یکی از آن ها پس از ثبت فرم آن را اعتبار سنجی می کند و دیگری هنگام ورود داده ها. فرم برای نمایش خطا یا موفق بودن دریافت اطلاعات از حاشیه ی سبز یا قرمز استفاده می کند. همچنین کلاس های valid-feedback. و invalid-feedback. برای (در صورت اضافه شدن) به کاربر واضح و دقیق می گویند که کجای کارشان اشتباه بوده است و کدام قسمت نیاز به تصحیح دارد.

مثال زیر با استفاده از was-validated. نوشته شده است. بنابراین قبل از ثبت فرم اشتباهات کاربر را به او متذکر می شود:

<!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">
  <h2>Form Validation</h2>
  <p>In this example, we use <code>.was-validated</code> to indicate what's missing before submitting the form:</p>
  <form action="/action_page.php" class="was-validated">
    <div class="form-group">
      <label for="uname">Username:</label>
      <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Please fill out this field.</div>
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Please fill out this field.</div>
    </div>
    <div class="form-group form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
        <div class="valid-feedback">Valid.</div>
        <div class="invalid-feedback">Check this checkbox to continue.</div>
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>

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

مثال زیر با استفاده از needs-validation. نوشته شده است. بنابراین بعد از ثبت فرم اشتباهات را به کاربر می گوید:

<!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">
  <h2>Form Validation</h2>
  <p>In this example, we use <code>.needs-validation</code>, which will add the validation effect AFTER the form has been submitting (if there's anything missing).</p>
  <p>Try to submit this form before filling out the input fields, to see the effect.</p>
  <form action="/action_page.php" class="needs-validation" novalidate>
    <div class="form-group">
      <label for="uname">Username:</label>
      <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Please fill out this field.</div>
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Please fill out this field.</div>
    </div>
    <div class="form-group form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
        <div class="valid-feedback">Valid.</div>
        <div class="invalid-feedback">Check this checkbox to continue.</div>
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

<script>
// Disable form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Get the forms we want to add validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

</body>
</html>

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

اگر دقت کرده باشید در مثال بالا کمی کد جی کوئری نیز وجود دارد. بدون این کدهای جی کوئری نمی توانید این مثال را عملی کنید.

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

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

حسن فرجی

20 شهریور 1398

سلام ممنون از آموزش خوب تون ممنون میشم if خط 52 توضیح بدین بخصوص شرط if رو

امیر زوارمی

21 شهریور 1398

سلام دوست عزیز، ما چیز هایی به نام constraint در HTML5 داریم. میتونین لیستشون رو اینجا ببینین: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api اگر ازشون استفاده کرده باشین و وجود داشته باشن، تابع checkValidity میاد این ها رو چک میکنه که صحیح باشن. بحث طولانی هست. میتونین از اینجا در موردش اطلاعات کسب کنین: https://www.sitepoint.com/html5-forms-javascript-constraint-validation-api/ بنده هم سعی میکنم یک یا دو مقاله در مورد این موضوع منتشر کنم.