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

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

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

ساخت فرم ساده

یکی از مباحث مهم در طراحی سایت فرم ها هستند تقریبا همه سایت ها دارای فرم هستند اما چیدمان این فرم ها و نحوه اعتبار سنجی آن ها مورد مهمی است که این جلسه به کمک بوت استرپ ۴ به آن میپردازیم.

برای یک فرم ساده به چند تگ نیاز داریم تگ form و input و label و button و بعد از آن به کلاس های بوت استرپ برای نمایش و اعتبارسنجی آن ها .تمام فرم ما باید داخل تگ from باشد بعد از آن هر input نیاز به یک label دارد که عنوان آن است پس نیاز به یک div با کلاس form-group داریم که label و input را داخل آن قرار دهیم.به input خود کلاس form-control را میدهیم و یک id با نام دلخواه به آن میدهیم که این نام دلخواه را باید به attribute با نام for بدهیم .

اگر قصد دارید دکمه چک را نیز قرار دهید باید در کنار کلاس form-group در تگ div کلاس form-check را نیز قرار دهید.همچنین نیاز به کلاس form-check-label در تگ label نیز دارید و به تگ input نیز باید کلاس form-check-input بدهید. برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

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

ساخت فرم خطی

فرمی که در مرحله قبل ساختیم هر فیلد آن در خطی مجزا بود اما اگر بخواهیم کل فرم را در یک خط قرار بدهیم باید از کلاس های بوت استرپ استفاده کنیم برای اینکار باید کلاس form-inline را به تگ form خود بدهیم با همین کلاس ساده میتوانیم فرم های خود را در قالب خطی نمایش دهیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<form class="form-inline" action="/action_page.php">
  <label for="email">Email address:</label>
  <input type="email" class="form-control" id="email">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

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

در فرم خطی بالا که آموزش دادیم المان ها کاملا به هم چسبیده هستند اگر قصد دارید این المان ها را مرتب کنید میتوانید از ۲ کلاس استفاده کنید یکی برای تنظیم بالا و پایین بودن فیلد ها و یکی فاصله چپ و راست آنها کلاس mb-2 برای بالا و پایین و کلاس mr-sm-2 برای چپ و راست کردن فاصله المان ها برای واضح شدن موضوع شما میتوانید از کد زیر کمک بگیرید:

<form class="form-inline" action="/action_page.php">
  <label for="email" class="mr-sm-2">Email address:</label>
  <input type="email" class="form-control mb-2 mr-sm-2" id="email">
  <label for="pwd" class="mr-sm-2">Password:</label>
  <input type="password" class="form-control mb-2 mr-sm-2" id="pwd">
  <div class="form-check mb-2 mr-sm-2">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

اعتبارسنجی فرم ها به کمک کلاس بوت استرپ

شما میتوانید به کمک کلاس های بوت استرپ به راحتی در لحظه فرم ها را اعتبارسنجی کنید .شما برای این کار به زبان برنامه نویسی دیگری نیاز ندارید.کافیست در تگ form خود کلاس was-validated را قرار دهید و به input های خود کد required را اضافه کنید این کد برای اجباری شدن لازم است چرا که تا فیلدی اجباری نشود امکان اعتبارسنجی آن وجود ندارد. ما ۲ پیغام داریم که در صورت درست یا نادرست بودن اعتبار نمایش داده میشود پیغام درست را در div با کلاس valid-feedback و پیغام نادرست را در div با کلاس invalid-feedback قرار میدهیم. به همین راحتی میتوانیم فیلد ها را اعتبارسنجی کنیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

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

اعتبارسنجی بعد از ارسال درخواست

در قسمت قبلی به کمک کلاس های بوت استرپ و در لحظه اعتبارسنجی را انجام دادیم حال میخواهیم اعتبارسنجی بعد از ارسال را انجام دهیم برای این کار به تگ form باید کلاس needs-validation را اضافه کنیم همچنین لازم است مقدار novalidate را نیز در تگ قرار دهیم باقی موارد مانند قسمت قبل است با این تفاوت که در این حالت ما باید از اسکریپت استفاده کنیم برای راحتی شما در کد زیر اسکریپت را قرار داده ایم :

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

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

آموزش فرم در اینجا به پایان میرسد

نکته این آموزش ۲ روش اعتبارسنجی بود:

• اعتبارسنجی در لحظه : was-validated
• اعتبارسنجی بعد ارسال : 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>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>



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

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


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


----------------------------------------------------------------------------
<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">درست</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>

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

<br>
</body>
</html>

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

آموزش Bootstrap 4 جلسه نوزدهم (Navbar)

آموزش Bootstrap 4 جلسه بیست و یکم (Input)

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

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