Formulir yang memiliki pilihan Pagi dan Sore memerlukan konteks: apakah pengguna sedang memilih jadwal, cara pengiriman, atau waktu dihubungi? Pada latihan ini kita membuat kelompok pilihan jadwal belajar memakai HTML. Fokusnya adalah struktur yang jelas sebelum menambahkan warna atau proses penyimpanan.
Hasil yang akan dibuat
Satu kelompok berjudul “Pilih satu jadwal belajar” berisi dua radio button. Pengguna dapat memilih Pagi atau Sore, serta mengaktifkan pilihan dengan mengeklik tulisannya. Contoh ini hanya antarmuka; tidak ada server tujuan, pengiriman data, atau pendaftaran nyata.
Buat berkas pilihan-kelas.html. Salin kode berikut lalu buka di browser. Jika berkas terbuka sebagai teks, periksa ekstensi HTML terlebih dahulu.
<!doctype html>
<html lang="id">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Pilihan kelas</title>
<body>
<h1>Latihan formulir pilihan kelas</h1>
<form>
<fieldset>
<legend>Pilih satu jadwal belajar</legend>
<p><input id="pagi" type="radio" name="jadwal" value="pagi">
<label for="pagi">Pagi</label></p>
<p><input id="sore" type="radio" name="jadwal" value="sore">
<label for="sore">Sore</label></p>
</fieldset>
</form>
<p>Demo antarmuka; belum mengirim atau menyimpan pendaftaran.</p>
</body>
</html>Kenali empat hubungan penting
fieldset mengelompokkan kontrol yang berkaitan. legend memberi judul kelompok. label memberi nama masing-masing kontrol. Nilai for pada label harus cocok dengan id input yang dituju. Judul kelompok tidak menggantikan label setiap pilihan; keduanya menjelaskan tingkat informasi berbeda.
Nama kelompok radio diatur melalui name. Karena kedua input memakai name=”jadwal”, memilih Sore akan membatalkan pilihan Pagi. id tetap harus berbeda agar label mengarah ke kontrol yang tepat. value membedakan nilai pilihan untuk pemrosesan kelak; teks yang dibaca pengguna tetap berasal dari label.
Uji langkah demi langkah
- Klik tulisan Pagi. Radio Pagi harus terpilih walaupun Anda tidak tepat mengeklik lingkarannya.
- Klik Sore. Hanya Sore yang boleh terpilih dalam kelompok jadwal.
- Muat ulang halaman dan gunakan Tab untuk masuk ke kelompok. Gunakan tombol panah untuk mencoba perpindahan pilihan; perilaku fokus awal dapat berbeda antarbrowser.
- Perbesar tampilan browser. Periksa bahwa judul dan pilihan masih terbaca serta tidak saling menutup.
- Bila tersedia, uji dengan pembaca layar. Dengarkan apakah nama kelompok dan label pilihan memberi konteks yang cukup.
Kesalahan yang mudah diperbaiki
Jika mengeklik tulisan tidak memilih radio, periksa kecocokan for dan id. Jika dua radio dapat aktif bersama, periksa apakah name benar-benar sama dan berada dalam konteks formulir yang sama. Jika kontrol berbeda memakai id yang sama, beri id unik lalu sesuaikan labelnya. Hindari menambahkan ARIA untuk menutupi struktur HTML yang keliru ketika elemen bawaan sudah cukup.
Tambahkan kelompok kedua
Buat fieldset kedua dengan legend “Pilih format belajar”. Tambahkan pilihan Tatap muka dan Daring. Gunakan name=”format”, serta id berbeda seperti tatap-muka dan daring. Hasilnya: satu jadwal dan satu format dapat dipilih bersamaan, tetapi dua jadwal tidak dapat aktif bersama. Itulah pemeriksaan sederhana untuk membuktikan bahwa pembagian kelompok Anda benar.
Bila perlu pilihan lebih dari satu, pertimbangkan checkbox sesuai kebutuhan. Jangan mengubah radio menjadi checkbox sekadar untuk merapikan tampilan; keduanya memiliki makna interaksi berbeda. Setelah struktur benar, tambahkan CSS dengan tetap mempertahankan indikator fokus dan keterbacaan label.
Batas latihan dan langkah berikutnya
Contoh ini belum menyimpan data. Atribut name dan value baru berguna untuk alur pengiriman jika proses formulir dibuat. Validasi pada server tetap diperlukan saat aplikasi nyata dikembangkan. Untuk melengkapi halaman dengan penjelasan yang bisa dibuka-tutup, pelajari FAQ HTML details dan summary.
Rujukan resmi
MDN: fieldset, legend, dan label, diperiksa 5 November 2026. Contoh latihan disusun orisinal untuk Kribbi Study.