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

با سلام و وقت بخیر

با آموزشی دیگر از سری مباحث بوت استرپ 4 تحت عنوان “فرم ها در بوت استرپ4” در خدمتتون هستیم.

طراحی فرم ها یکی از اصول مهم و اولیه در هر سایتی به حساب می آید. بیشتر سایت ها برای دریافت اطلاعات از کاربران خود نیاز به فرم های مختلف  دارند.

بوت استرپ این امکان را در اختیار ما قرار می دهد که به سادگی فرم های مورد نظرمان را طراحی نماییم.

Bootstrap 4’s Default Settings

فرم های استاندارد در بوت استرپ یک سری از المان های پیش فرض طراحی را دارا می باشند.

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

Bootstrap 4 Form Layouts

بوت استرپ 4 دو نوع از طرح بندی های مربوط به فرم ها را ارائه میدهد:

• فرم های تمام عرض
• فرم های درون خطی

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

با استفاده از این کلاس شما می توانید فرم تمام عرض با دو  فیلد ورود اطلاعات، یک چک باکس و یک دکمه سابمیت طراحی کنید.

برای اطمینان از حاشیه ی مناسب در  اطراف هر کدام از المان های فرم ، از کلاس .form-group استفاده می کنیم.

<form action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="form-group 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>

فرم های درون خطی

در این نوع فرم تمامی المان ها(فیلدهای ورودی، چک باکس ها و …) در یک خط قرار می گیرند.

نکته : این نوع از فرم ها در نمایشگرهایی تا اندازه 576 px نیز به صورت اینلاین نمایش داده می شوند اما در صفحات کوچکتر ، در سطرهای متوالی قرار می گیرند.

برای داشتن فرم های اینلاین از کلاس .form-inline در تگ فرم استفاده می کنیم.

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

Inline Form with Utilities

در فرم های اینلاین پیش فرض ، المان ها بدون فاصله  در کنار یکدیگر جای می گیرند. اما برای داشتن فرم های زیباتر از نظر بصری ، می توان به المان ها حاشیه مناسب(حاشیه بالا پایین و چپ و راست) اضافه نمود.

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

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

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

برای مشاهده مقالات قبلی از لینک زیر اقدام نمایید.

Navigation Bar در بوت استرپ 4