Membuat Form di Bootstrap 4

Pada Bootstrap, Form akan secara otomatis mendapatkan Styling Global. Semua elemen Kontekstual seperti <input>, <textarea>, dan <select> yang menggunakan class .form-control memiliki lebar 100%.


Layout Form pada Bootstrap 4

Bootstrap menyediakan dua jenis Layout untuk Form antara lain:
  1. Stacked (Menumpuk - Lebar)
  2. Inline

Membuat Form Stacked pada Bootstrap 4

Berikut adalah contoh untuk membuat Form Stacked (Menumpuk) dengan dua input, satu checkbox, dan satu tombol submit.

Membuat Form Stacked pada Bootstrap 4

Kita perlu menambahkan elemen pembungkus dengan class .form-grup di setiap kontrol Form untuk memastikan agar margin-nya telah tepat:

<form action="#">
  <div class="form-group">
    <label for="email">Alamat Email:</label>
    <input type="email" class="form-control" placeholder="Masukkan Email" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" placeholder="Masukkan Password" id="pwd">
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Ingat Saya
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form> 

Lihat kode di Github | Lihat Live Demo

Membuat Form Inline pada Bootstrap 4

Inline Form pada Bootstrap akan memiliki perataan kiri dan display inline.

Membuat Form Inline pada Bootstrap 4

Catatan: Inline Form hanya berlaku pada lebar Viewport setidaknya 576px. Pada layar yang lebih kecil dari 576px, Inline Form akan terlihat menumpuk (Stacked) secara horizontal.

Aturan tambahan untuk membuat Inline Form pada Bootstrap adalah dengan menambahkan class .form-inline pada elemen <form>.

Berikut adalah contoh untuk membuat Form Inline dengan dua input, satu checkbox, dan satu tombol submit:

<form class="form-inline" action="#">
  <label for="email">Alamat Email: </label>
  <input type="email" class="form-control" placeholder="Masukkan Email" id="email">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" placeholder="Masukkan Password" id="pwd">
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Ingat Saya
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form> 

Lihat kode di Github | Lihat Live Demo

Membuat Form Inline dengan Utilities pada Bootstrap 4

Contoh Inline Form di atas akan terlihat terlalu mepet bukan? Disini, kita akan membuatnya terlihat jauh lebih baik dengan Utility jarak pada Bootstrap. Berikut adalah contoh untuk menambahkan margin kanan (.mr-sm-2) untuk setiap input pada semua perangkat (ukuran layar kecil ke atas) dan margin bawah (.mb-2) yang digunakan untuk menyusun input (beralih dari horizontal ke vertical karena tidak cukup ruang/lebar):

Membuat Form Inline dengan Utilities pada Bootstrap 4

<form class="form-inline" action="#">
  <label for="email" class="mr-sm-2">Alamat Email:</label>
  <input type="email" class="form-control mb-2 mr-sm-2" placeholder="Masukkan Email" id="email">
  <label for="pwd" class="mr-sm-2">Password:</label>
  <input type="password" class="form-control mb-2 mr-sm-2" placeholder="Masukkan Password" id="pwd">
  <div class="form-check mb-2 mr-sm-2">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Ingat Saya
    </label>
  </div>
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form> 

Lihat kode di Github | Lihat Live Demo

Mengatur Form Row/Grid pada Bootstrap 4

Kita juga dapat menggunakan kolom (.col) untuk mengontrol lebar dan perataan input Form tanpa menggunakan Utility. Ingatlah untuk meletakkannya di dalam kontainer .row.

Pada contoh di bawah ini, kita akan menggunakan dua kolom yang akan tampil bersampingan. Kita akan belajar lebih banyak tentang kolom dan row pada bagian yang akan datang:

Mengatur Form Row/Grid pada Bootstrap 4

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" id="email" placeholder="Masukkan Email" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Masukkan Password" name="pswd">
    </div>
  </div>
</form> 

Lihat kode di Github | Lihat Live Demo

Jika kalian ingin mengurangi margin dari Grid, kalian dapat menggunakan .form-row sebagai pengganti dari .row:

Mengatur Form Row/Grid pada Bootstrap 4

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" id="email" placeholder="Masukkan Email" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Masukkan Password" name="pswd">
    </div>
  </div>
</form> 

Lihat kode di Github | Lihat Live Demo

Mengatur Validasi Form pada Bootstrap 4

Kita dapat menggunakan class validasi yang berbeda-beda untuk memberikan Feedback kepada pengguna. Kita dapat menambahkan class validasi .was-validated atau .needs-validation ke dalam elemen <form>, tergantung pada apakah kalian ingin memberikan Feedback validasi sebelum atau setelah mengirimkan Form. Input akan memiliki Border berwarna hijau (valid) atau merah (tidak valid) untuk menunjukkan validasi pada Form. Kita juga dapat menambahkan pesan .valid-feedback atau .invalid-feedback untuk memberitahukan pengguna tentang apa yang harus diisi atau dilakukan sebelum mengirimkan Form.

Mengatur Validasi Form pada Bootstrap 4

Pada contoh berikut, kita akan menggunakan class .was-validated untuk menunjukkan apa yang harus dilakukan sebelum mengirimkan Form:

<form action="#" class="was-validated">
  <div class="form-group">
    <label for="uname">Username:</label>
    <input type="text" class="form-control" id="uname" placeholder="Masukkan Username" name="uname" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Username harus diisi.</div>
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Masukkan Password" name="pswd" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Password harus diisi.</div>
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember" required> Saya setuju ...
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Checkbox harus dicentang.</div>
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form> 

Lihat kode di Github | Lihat Live Demo

Pada contoh di bawah ini, kita akan menggunakan class .needs-validation yang akan menambahkan efek validasi setelah Form dikirimkan (jika ada yang hilang). Perhatikan juga bahwa kalian juga harus menambahkan beberapa kode jQuery agar contoh berikut dapat berfungsi dengan baik:

<form action="#" class="needs-validation" novalidate>
  <div class="form-group">
    <label for="uname">Username:</label>
    <input type="text" class="form-control" id="uname" placeholder="Masukkan Username" name="uname" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Username harus diisi.</div>
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Masukkan Password" name="pswd" required>
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Password harus diisi.</div>
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember" required> Saya setuju ...
      <div class="valid-feedback">Valid.</div>
      <div class="invalid-feedback">Checkbox harus dicentang.</div>
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<script>
// Menonaktifkan Submit Form jika terdapat input yang tidak valid
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Mendapatkan semua Form yang kita inginkan untuk menambahkan style validasi ke
    var forms = document.getElementsByClassName('needs-validation');
    // Loop dan mencegah Submit Form
    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> 

Lihat kode di Github | Lihat Live Demo

Tulis Komentar

0 Komentar