Bootstrap 4 Formulir Kustom
Bootstrap 4 Formulir Kustom
Bootstrap 4 hadir dengan elemen formulir yang disesuaikan, yang dimaksudkan untuk menggantikan default browser:
Rentang Kustom:
Rentang Bawaan:
Kotak Centang Khusus
Untuk membuat kotak centang khusus, bungkus elemen penampung, seperti <div>, dengan kelas dari .custom-controldan .custom-checkboxdi sekitar kotak centang. Kemudian tambahkan .custom-control-inputke input dengan type="checkbox".
Tips: Jika Anda menggunakan label untuk teks pengiring, tambahkan .custom-control-labelkelas ke dalamnya. Perhatikan bahwa nilai atribut for harus cocok dengan id kotak centang:
Contoh
<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck"
name="example1">
<label class="custom-control-label" for="customCheck">Check this custom
checkbox</label>
</div>
</form>
Sakelar Kustom
Untuk membuat "sakelar pengalih" khusus, bungkus elemen penampung, seperti <div>, dengan kelas dari .custom-controldan .custom-switchdi sekitar kotak centang. Kemudian tambahkan .custom-control-inputkelas ke kotak centang:
Contoh
<form>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1">Toggle me</label>
</div>
</form>
Tombol Radio Kustom
Untuk membuat tombol radio khusus, bungkus elemen penampung, seperti <div>, dengan kelas dari .custom-controldan .custom-radiodi sekitar tombol radio. Kemudian tambahkan .custom-control-inputke input dengan type="radio".
Tips: Jika Anda menggunakan label untuk teks pengiring, tambahkan .custom-control-labelkelas ke dalamnya. Perhatikan bahwa nilai atribut for harus cocok dengan id radio:
Contoh
<form>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio"
name="example1" value="customEx">
<label
class="custom-control-label" for="customRadio">Custom radio</label>
</div>
</form>
Kontrol Formulir Kustom Sebaris
Jika Anda ingin kontrol formulir khusus duduk berdampingan (sebaris), tambahkan .custom-control-inlineke pembungkus/wadah:
Contoh
<form>
<div class="custom-control custom-radio
custom-control-inline">
<input type="radio" class="custom-control-input" id="customRadio"
name="example" value="customEx">
<label
class="custom-control-label" for="customRadio">Custom radio
1</label>
</div>
<div class="custom-control custom-radio
custom-control-inline">
<input type="radio" class="custom-control-input" id="customRadio2"
name="example" value="customEx">
<label
class="custom-control-label" for="customRadio2">Custom radio
2</label>
</div>
</form>
Menu Pilih Kustom
Untuk membuat menu pilih kustom, tambahkan .custom-selectkelas ke elemen <select>:
Contoh
<form>
<select name="cars" class="custom-select">
<option selected>Custom Select Menu</option>
<option
value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
Ukuran Menu Pilih Kustom
Gunakan .custom-select-smkelas untuk membuat menu pilih kecil dan .custom-select-lgkelas untuk yang besar:
Contoh
<form>
<!-- Small -->
<select name="cars" class="custom-select-sm">
<option selected>Small Custom Select Menu</option>
<option
value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<!-- Large -->
<select name="cars" class="custom-select-lg">
<option selected>Large Custom Select Menu</option>
<option
value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
Rentang Kustom
Untuk membuat menu rentang kustom, tambahkan .custom-rangekelas ke input dengan type="<range>":
Contoh
<form>
<label for="customRange">Custom range</label>
<input type="range" class="custom-range" id="customRange" name="points1">
</form>
Unggah File Khusus
Untuk membuat unggahan file khusus, bungkus elemen penampung dengan kelas di .custom-filesekitar input dengan type="file". Kemudian tambahkan .custom-file-inputke itu.
Tips: Jika Anda menggunakan label untuk teks pengiring, tambahkan .custom-file-labelkelas ke dalamnya. Perhatikan bahwa nilai atribut for harus cocok dengan id kotak centang:
Perhatikan bahwa Anda juga harus menyertakan beberapa kode jQuery jika Anda ingin nama file muncul saat Anda memilih file tertentu:
Contoh
<form>
<div class="custom-file">
<input
type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</form>
<script>
// Add the following code if
you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName =
$(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>