Bootstrap - Checkbox & Radio: Panduan Pemula

Hai sana, para pengembang web masa depan! Hari ini, kita akan melihat dunia menarik kontrol formulir Bootstrap, khususnya checkbox dan tombol radio.Elemen interaktif kecil ini mungkin terlihat sederhana, tetapi mereka sangat kuat untuk mengumpulkan input pengguna. Jadi, mari kita sisir lengan dan mulai!

Bootstrap - Checks & radios

Pengenalan ke Kontrol Form Bootstrap

Sebelum kita masuk ke detil, mari kitaambil sedikit waktu untuk menghargai mengapa kita belajar tentang Bootstrap. Bayangkan Anda membangun sebuah rumah. Anda bisa membuat setiap batu dari awal, atau Anda bisa menggunakan komponen yang sudah siap pakai. Bootstrap seperti sebuah peti harta karun yang penuh komponen siap pakai untuk situs web Anda. Itu menghemat waktu dan memastikan konsistensi. Sekarang, mari kita jelajahi komponen pertama kita!

Checkbox: Keajaiban Pilihan Ganda

Checkbox Dasar

Checkbox adalah seperti kotak kecil yang pengguna dapat mengklik untuk memilih beberapa opsi. Mereka sempurna untuk saat Anda ingin pengguna memilih lebih dari satu item dari daftar. Mari kita buat checkbox pertama kita:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Checkbox default
</label>
</div>

Dalam contoh ini, kita menggunakan kelas Bootstrap untuk menata checkbox kita. Kelas form-check membuat sebuat wrapper, sedangkan form-check-input menata checkbox itu sendiri. Atribut for dalam label cocok dengan id input, menghubungkan mereka.

State Tercentang

kadang-kadang, Anda ingin checkbox tercentang secara default. Itu sama mudah seperti menambahkan atribut checked:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checkbox tercentang
</label>
</div>

Indeterminate

Sekarang, mari kita lihat fakta menarik: checkbox dapat memiliki state ketiga yang disebut "indeterminate". Itu seperti saat remaja Anda membersihkan kamar mereka - itu belum benar-benar bersih, tapi juga belum benar-benar kotor. Kita tidak bisa menyetel state ini di HTML, tapi kita bisa dengan JavaScript:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
Checkbox indeterminate
</label>
</div>

<script>
document.getElementById('flexCheckIndeterminate').indeterminate = true;
</script>

Checkbox Dinonaktifkan

kadang-kadang, Anda mungkin ingin menunjukkan checkbox tetapi tidak mengijinkan pengguna untuk berinteraksi dengannya. Itu di mana atribut disabled berguna:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
Checkbox dinonaktifkan
</label>
</div>

Radios: Juara Pilihan Tunggal

Tombol Radio Dasar

Tombol radio adalah sepupu checkbox. Mereka terlihat mirip tapi berperilaku berbeda. Sedangkan checkbox membolehkan pilihan ganda, tombol radio memaksa pilihan tunggal dalam satu grup. Mari kita buat satu set tombol radio:

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Radio default
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Radio tercentang default
</label>
</div>

Perhatikan bagaimana kedua tombol radio memiliki atribut name yang sama? Ini mengelompokkan mereka bersama, memastikan hanya satu yang dapat dipilih pada saat yang sama.

Tombol Radio Dinonaktifkan

Seperti checkbox, kita juga dapat menonaktifkan tombol radio:

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
Radio dinonaktifkan
</label>
</div>

Toggles: Toggle Modern

Toggle adalah alternatif stylish untuk checkbox. Mereka sempurna untuk pengaturan on/off. Mari kita buat satu:

<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Checkbox toggle default</label>
</div>

Kelas form-switch mengubah checkbox kita menjadi toggle yang ramping.

Opsi Tata Letak

Default (Tumpuk)

Secara default, checkbox dan tombol radio ditata vertikal:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck1">
<label class="form-check-label" for="stackedCheck1">Checkbox tumpuk 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck2">
<label class="form-check-label" for="stackedCheck2">Checkbox tumpuk 2</label>
</div>

Inline

Ingin opsi berdampingan? Gunakan kelas form-check-inline:

<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>

Balik

Ingin label sebelum checkbox? Gunakan form-check-reverse:

<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">Checkbox balik</label>
</div>

Tanpa Label

kadang-kadang, Anda mungkin ingin checkbox atau tombol radio tanpa label:

<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

Ingat untuk menggunakan aria-label untuk aksesibilitas!

Tombol Toggle

Tombol toggle adalah cara menarik untuk menggunakan checkbox dan tombol radio. Mereka terlihat seperti tombol biasa tapi berperilaku seperti checkbox atau radio:

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Toggle tunggal</label>

Gaya Outlined

Ingin penampilan yang lebih halus? Gunakan gaya outlined:

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Toggle tunggal</label>

Kesimpulan

Selamat! Anda baru saja mengambil tur besar dari checkbox dan tombol radio Bootstrap. Komponen kecil ini mungkin terlihat sederhana, tetapi mereka adalah blok bangunan interaktif formulir. Ingat, latihan membuat sempurna. Cobalah menggabungkan elemen ini dalam berbagai cara untuk membuat formulir yang menarik bagi pengguna Anda.

Berikut adalah tabel rujukan cepat dari metode yang kita pelajari:

Metode	Deskripsi
Checkbox Dasar	`<input class="form-check-input" type="checkbox">`
Checkbox Tercentang	Tambahkan atribut `checked`
Checkbox Indeterminate	Set dengan JavaScript
Checkbox Dinonaktifkan	Tambahkan atribut `disabled`
Tombol Radio Dasar	`<input class="form-check-input" type="radio">`
Tombol Radio Dinonaktifkan	Tambahkan atribut `disabled`
Toggle	Gunakan kelas `form-switch`
Tata Letak Inline	Gunakan `form-check-inline` kelas
Tata Letak Balik	Gunakan `form-check-reverse` kelas
Tanpa Label	Omit label, gunakan `aria-label`
Tombol Toggle	Gunakan `btn-check` kelas
Gaya Outlined	Gunakan `btn-outline-*` kelas

Terus mencoba, terus belajar, dan terutama, bersenang-senang membuat formulir web yang menakjubkan!

Credits: Image by storyset