Bootstrap - Ceklis & Radio: Panduan untuk Pemula

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

Pengenalan ke Kontrol Formulir 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 jadi. Bootstrap seperti sebuah peti harta karun dari komponen yang sudah jadi untuk situs web Anda. Itu menghemat waktu dan memastikan konsistensi. Sekarang, mari kita jelajahi komponen pertama kita!

Ceklis: Wunderkind Multi-Pilihan

Ceklis Dasar

Ceklis seperti kotak kecil yang pengguna bisa klik untuk memilih beberapa opsi. Itu sempurna untuk saat Anda ingin pengguna memilih lebih dari satu item dari daftar. Mari kita buat ceklis pertama:

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

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

Status Ceklis

kadang-kadang, Anda ingin ceklis tercentang sebelumnya. Itu mudah sekali, tinggal tambahkan atribut checked:

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

Ceklis Tidak Pasti

Sekarang, ini adalah fakta menarik: ceklis bisa memiliki keadaan ketiga yang disebut "tidak pasti". Itu seperti saat remaja Anda membersihkan kamar mereka - itu belum benar-benar bersih, tapi tidak sepenuhnya kotor juga. Kita tidak bisa menyetel keadaan 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">
Ceklis tidak pasti
</label>
</div>

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

Ceklis Nonaktif

kadang-kadang, Anda mungkin ingin menampilkan ceklis tetapi tidak mengizinkan 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">
Ceklis nonaktif
</label>
</div>

Radio: Juara Pilihan Tunggal

Tombol Radio Dasar

Tombol radio seperti sepupu ceklis. Mereka terlihat mirip tapi berperilaku berbeda. Sedangkan ceklis membolehkan pilihan ganda, tombol radio memaksa pilihan tunggal dalam grup. Mari kita buat sebuah 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>

Catatlah bagaimana kedua tombol radio memiliki atribut name yang sama? Ini mengelompokkan mereka bersamaan, memastikan hanya satu yang bisa dipilih pada saat yang sama.

Tombol Radio Nonaktif

Seperti ceklis, kita juga bisa 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 nonaktif
</label>
</div>

Toggle: Toggle Modern

Toggle adalah alternatif stylish untuk ceklis. Itu sempurna untuk pengaturan on/off. Mari kita buat salah satu:

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

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

Opsi Layout

Default (Tertumpuk)

Secara default, ceklis dan tombol radio tertumpuk vertikal:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck1">
<label class="form-check-label" for="stackedCheck1">Ceklis tertumpuk 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck2">
<label class="form-check-label" for="stackedCheck2">Ceklis tertumpuk 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>

Terbalik

Ingin label sebelum ceklis? 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">Ceklis terbalik</label>
</div>

Tanpa Label

Kadang-kadang, Anda mungkin ingin ceklis 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!

Toggle Button

Toggle button adalah cara menarik untuk menggunakan ceklis dan tombol radio. Mereka terlihat seperti tombol biasa tetapi berperilaku seperti ceklis 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>

Konklusi

Selamat! Anda telah melakukan perjalanan besar ke checkbox dan radio Bootstrap. Komponen kecil ini mungkin terlihat sederhana, tapi mereka adalah blok bangunan interaktif formulir. Ingat, latihan membuat sempurna. Cobalah untuk mengkombinasikan 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
Ceklis Dasar	<input class="form-check-input" type="checkbox">
Ceklis Tercentang	Tambahkan atribut checked
Ceklis Tidak Pasti	Set dengan JavaScript
Ceklis Nonaktif	Tambahkan atribut disabled
Tombol Radio Dasar	<input class="form-check-input" type="radio">
Tombol Radio Nonaktif	Tambahkan atribut disabled
Toggle	Gunakan kelas form-switch
Layout Inline	Gunakan kelas form-check-inline
Layout Terbalik	Gunakan kelas form-check-reverse
Tanpa Label	Omit label, gunakan aria-label
Toggle Button	Gunakan kelas btn-check
Gaya Outlined	Gunakan kelas btn-outline-*

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

Credits: Image by storyset