Bootstrap 4 Formulir
Pengaturan Default Bootstrap 4
Kontrol formulir secara otomatis menerima beberapa gaya global dengan Bootstrap:
Semua tekstual <input>, <textarea>, dan
<select>elemen dengan kelas .form-controlmemiliki lebar 100%.
Layout Formulir Bootstrap 4
Bootstrap menyediakan dua jenis tata letak formulir:
- Bentuk bertumpuk (lebar penuh)
- bentuk sebaris
Bootstrap 4 Bentuk Bertumpuk
Contoh berikut membuat formulir bertumpuk dengan dua bidang input, satu kotak centang, dan tombol kirim.
Tambahkan elemen pembungkus dengan .form-group, di sekitar setiap kontrol formulir, untuk memastikan margin yang tepat:
Contoh
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" 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>
Formulir Inline Bootstrap
Dalam bentuk sebaris, semua elemen sejajar dan rata kiri.
Catatan: Ini hanya berlaku untuk formulir dalam area pandang yang lebarnya minimal 576 piksel. Pada layar yang lebih kecil dari 576px, itu akan menumpuk secara horizontal.
Aturan tambahan untuk formulir sebaris:
- Tambahkan kelas
.form-inlineke<form>elemen
Contoh berikut membuat formulir sebaris dengan dua bidang masukan, satu kotak centang, dan satu tombol kirim:
Contoh
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" 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>
Formulir Inline dengan Utilitas
Formulir sebaris di atas terasa "terkompresi", dan akan terlihat jauh lebih baik dengan utilitas spasi Bootstrap. Contoh berikut menambahkan margin kanan ( .mr-sm-2) ke setiap input di semua perangkat (kecil dan lebih tinggi). Dan kelas bawah margin ( .mb-2) digunakan untuk menata bidang input saat rusak (berubah dari horizontal ke vertikal karena tidak cukup ruang/lebar):
Contoh
<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" placeholder="Enter email" id="email">
<label for="pwd"
class="mr-sm-2">Password:</label>
<input type="password" class="form-control
mb-2 mr-sm-2" placeholder="Enter password" 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>
Anda akan mempelajari lebih lanjut tentang spasi dan kelas "pembantu" lainnya di Bab Utilitas Bootstrap 4 kami .
Bentuk Baris/Kisi
Anda juga dapat menggunakan kolom ( .col) untuk mengontrol lebar dan perataan input formulir tanpa menggunakan utilitas spasi. Ingatlah untuk memasukkannya ke dalam .rowwadah.
Pada contoh di bawah ini, kami menggunakan dua kolom yang akan muncul berdampingan. Anda akan belajar lebih banyak tentang kolom dan baris di Bab Grids Bootstrap .
Contoh
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Jika Anda ingin margin kisi lebih sedikit (timpa talang kolom default), gunakan .form-rowalih-alih .row:
Contoh
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
Validasi Formulir
Anda dapat menggunakan kelas validasi yang berbeda untuk memberikan umpan balik yang berharga kepada pengguna. Tambahkan salah satu .was-validatedatau .needs-validationke <form>elemen, bergantung pada apakah Anda ingin memberikan umpan balik validasi sebelum atau setelah mengirimkan formulir. Bidang masukan akan memiliki batas hijau (valid) atau merah (tidak valid) untuk menunjukkan apa yang hilang dalam formulir. Anda juga dapat menambahkan
.valid-feedbackatau .invalid-feedbackpesan untuk memberi tahu pengguna secara eksplisit apa yang hilang, atau perlu dilakukan sebelum mengirimkan formulir.
Contoh
Dalam contoh ini, kami menggunakan .was-validateduntuk menunjukkan apa yang hilang sebelum mengirimkan formulir:
<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>
Contoh
Dalam contoh ini, kami menggunakan .needs-validation, yang akan menambahkan efek validasi SETELAH formulir dikirimkan (jika ada yang kurang). Perhatikan bahwa Anda juga harus menambahkan beberapa kode jQuery agar contoh ini berfungsi dengan baik:
<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>