Grup Kotak Centang dan Tombol Radio
Izinkan pengguna memilih satu atau beberapa opsi dari sebuah grup.
Grup Kotak Centang dan Tombol Radio adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Kotak Centang
Kotak centang memungkinkan pengguna memilih nol, satu, atau banyak opsi:
<label>
<input type="checkbox" name="terms" value="agreed"> I agree to the Terms
</label>
<!-- Each checkbox is independent -->
<!-- checked attribute = pre-checked -->
<input type="checkbox" name="newsletter" value="yes" checked>Pengiriman Kotak Centang
Kotak centang hanya dikirimkan jika dicentang:
<form>
<input type="checkbox" name="hobby" value="reading"> Reading<br>
<input type="checkbox" name="hobby" value="coding"> Coding<br>
<input type="checkbox" name="hobby" value="gaming"> Gaming<br>
</form>
<!-- If reading and coding are checked:
hobby=reading&hobby=coding -->
<!-- Unchecked boxes send nothing -->Grup Kotak Centang dengan fieldset
Kelompokkan kotak centang yang berkaitan dengan fieldset + legend:
<fieldset>
<legend>Select your interests</legend>
<label><input type="checkbox" name="interest" value="html"> HTML</label>
<label><input type="checkbox" name="interest" value="css"> CSS</label>
<label><input type="checkbox" name="interest" value="js"> JavaScript</label>
<label><input type="checkbox" name="interest" value="python"> Python</label>
</fieldset>Tombol Radio
Tombol radio memungkinkan pengguna memilih tepat satu opsi dari sebuah grup:
<fieldset>
<legend>Preferred plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
<label><input type="radio" name="plan" value="enterprise"> Enterprise</label>
</fieldset>
<!-- All radios in a group share the same name attribute -->
<!-- Selecting one deselects the others -->Atribut checked
Pilih tombol radio atau kotak centang terlebih dahulu dengan atribut checked:
<fieldset>
<legend>Skill level</legend>
<label><input type="radio" name="level" value="beginner" checked> Beginner</label>
<label><input type="radio" name="level" value="intermediate"> Intermediate</label>
<label><input type="radio" name="level" value="advanced"> Advanced</label>
</fieldset>Penataan Kotak Centang dan Tombol Radio
Kotak centang dengan penataan kustom menggunakan trik label:
<label class="custom-check">
<input type="checkbox" name="agree">
<span class="checkmark"></span>
I agree
</label>
/* Hide native input, style the span: */
.custom-check input { opacity: 0; width: 0; }
.checkmark {
width: 1.25rem; height: 1.25rem;
border: 2px solid #ddd; border-radius: 3px;
display: inline-block; vertical-align: middle;
}
.custom-check input:checked + .checkmark { background: #0070f3; }Status indeterminate
Kotak centang dapat memiliki status indeterminate (tidak dicentang maupun tidak dicentang):
<input type="checkbox" id="select-all">
<script>
// Set via JavaScript only -- no HTML attribute
document.getElementById('select-all').indeterminate = true;
// Visually shown as a dash (−) in most browsers
// Used for "select all" when some children are checked
</script>radio tanpa Pilihan Bawaan
Terkadang lebih baik untuk tidak memilih tombol radio terlebih dahulu:
- Pilihan awal memberi kesan bahwa opsi tersebut direkomendasikan
- Untuk pilihan wajib tanpa nilai bawaan yang jelas (gender, paket), biarkan tidak dipilih
- Tambahkan
requireduntuk memastikan pengguna membuat pilihan secara eksplisit
<fieldset>
<legend>Gender</legend>
<label><input type="radio" name="gender" value="m" required> Male</label>
<label><input type="radio" name="gender" value="f" required> Female</label>
<label><input type="radio" name="gender" value="nb" required> Non-binary</label>
<label><input type="radio" name="gender" value="prefer_not" required> Prefer not to say</label>
</fieldset>Kotak Centang: checked dibandingkan dengan value
Dua hal penting tentang pengiriman kotak centang:
<!-- The value sent when checked: -->
<input type="checkbox" name="subscribe" value="yes">
<!-- Submits: subscribe=yes when checked -->
<!-- If value is omitted, default value is 'on' -->
<!-- JavaScript checked state: -->
const cb = document.querySelector('input[name="subscribe"]');
console.log(cb.checked); // true or false
console.log(cb.value); // 'yes' (always, even when unchecked)Navigasi Papan Ketik pada Grup Radio
Perilaku papan ketik untuk grup radio:
- Tab memindahkan fokus ke dalam grup, menuju radio yang dipilih atau radio pertama
- Tombol panah (↑/↓ atau ←/→) berpindah di antara opsi
- Tab memindahkan fokus keluar dari grup ke elemen berikutnya yang dapat menerima fokus
Pola Pilih Semua
Pola untuk memilih/membatalkan pilihan semua kotak centang:
<label>
<input type="checkbox" id="select-all"> Select all
</label>
<fieldset id="items">
<label><input type="checkbox" class="item" value="1"> Item 1</label>
<label><input type="checkbox" class="item" value="2"> Item 2</label>
<label><input type="checkbox" class="item" value="3"> Item 3</label>
</fieldset>
<script>
document.getElementById('select-all').addEventListener('change', function() {
document.querySelectorAll('.item').forEach(cb => cb.checked = this.checked);
});
</script>Pemeriksaan Cepat
Aturan atribut name apa yang membuat tombol radio menjadi bagian dari grup yang sama?
Ringkasan: Kotak Centang dan Tombol Radio
Hal-hal penting tentang kotak centang dan tombol radio:
- Kotak centang — memilih beberapa opsi; hanya dikirimkan jika dicentang
- Radio — memilih tepat satu opsi; dikelompokkan berdasarkan
name - Keduanya menggunakan atribut
checkeduntuk pilihan awal - Bungkus dengan
<fieldset>+<legend> - Tombol panah digunakan untuk bernavigasi dalam grup radio
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Grup Kotak Centang dan Tombol Radio” gratis?
Ya — teks lengkap “Grup Kotak Centang dan Tombol Radio” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Grup Kotak Centang dan Tombol Radio”?
Izinkan pengguna memilih satu atau beberapa opsi dari sebuah grup. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Grup Kotak Centang dan Tombol Radio” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Menu Dropdown Select dan option
- Textarea untuk Input Banyak Baris
- Grup Kotak Centang dan Tombol Radio
- Datalist untuk Pelengkapan Otomatis