HTML Dasar #13 - Radio Button, Checkbox, dan Select Dropdown

Setelah belajar input teks, password, email, dan number, sekarang saatnya mengenal input pilihan. Radio button, checkbox, dan select dropdown memungkinkan pengguna memilih dari beberapa opsi — sangat berguna untuk formulir seperti survei, pendaftaran, atau pemesanan.

Ringkasan Ketiga Jenis Input Pilihan

Jenis	Fungsi	Bisa Pilih Berapa?	Contoh
Radio Button	Memilih satu dari beberapa opsi	Hanya 1	Jenis kelamin, pilihan jawaban
Checkbox	Memilih satu atau lebih opsi	Bisa banyak	Hobi, minat, fitur produk
Select Dropdown	Memilih dari menu drop-down	Biasanya 1 (bisa lebih)	Kota, negara, bulan lahir

Aturan Penting:

Radio button dengan nama yang sama (name="...") akan saling eksklusif — hanya satu yang bisa dipilih.
Checkbox dengan nama yang sama bisa dipilih lebih dari satu.
Semua input wajib punya atribut name agar datanya terkirim ke server.

1. Radio Button

Radio button berbentuk lingkaran kecil. Hanya satu radio button dalam satu grup yang bisa dipilih. Cocok untuk pilihan yang mutually exclusive (saling meniadakan).

Struktur Dasar Radio Button:

<input type="radio" name="jenis_kelamin" value="laki_laki" id="laki">
<label for="laki">Laki-laki</label>

<input type="radio" name="jenis_kelamin" value="perempuan" id="perempuan">
<label for="perempuan">Perempuan</label>

Contoh langsung:

Jenis Kelamin:

Laki-laki Perempuan

Coba klik — hanya satu yang bisa dipilih!

Atribut Penting Radio Button:

name → nama grup (satu grup harus sama)
value → nilai yang dikirim ke server saat dipilih
checked → membuat radio button terpilih secara default
required → memastikan pengguna memilih salah satu

Contoh dengan default checked:

<input type="radio" name="metode_bayar" value="transfer" id="transfer" checked>
<label for="transfer">Transfer Bank</label>

<input type="radio" name="metode_bayar" value="cod" id="cod">
<label for="cod">COD (Bayar di Tempat)</label>

Metode Pembayaran:

Transfer Bank COD (Bayar di Tempat)

"Transfer Bank" sudah terpilih secara default

2. Checkbox

Checkbox berbentuk kotak kecil. Pengguna bisa memilih lebih dari satu opsi dalam satu grup. Cocok untuk pilihan yang tidak saling meniadakan.

Struktur Dasar Checkbox:

<input type="checkbox" name="hobi" value="membaca" id="membaca">
<label for="membaca">Membaca</label>

<input type="checkbox" name="hobi" value="olahraga" id="olahraga">
<label for="olahraga">Olahraga</label>

<input type="checkbox" name="hobi" value="musik" id="musik">
<label for="musik">Musik</label>

Contoh langsung:

Hobi (bisa pilih lebih dari satu):

Membaca Olahraga Musik

Coba pilih beberapa — semua bisa dipilih bersamaan!

Atribut Penting Checkbox:

name → nama field (bisa sama untuk beberapa checkbox)
value → nilai yang dikirim ke server saat dicentang
checked → membuat checkbox tercentang secara default
required → minimal satu checkbox harus dicentang

Contoh checkbox dengan array name (multiple values):

<!-- Jika name sama, server akan menerima array nilai -->
<input type="checkbox" name="minat[]" value="web"> Web Development
<input type="checkbox" name="minat[]" value="mobile"> Mobile Development
<input type="checkbox" name="minat[]" value="data"> Data Science

Tips Checkbox: Jika kamu ingin mengirim banyak nilai dari checkbox yang sama, gunakan format name="hobi[]" (dengan kurung siku). Ini akan mengirim semua nilai yang dicentang sebagai array ke server.

3. Select Dropdown

Select dropdown adalah menu pilihan yang menghemat tempat. Cocok untuk opsi yang banyak (misal daftar 34 provinsi).

Struktur Dasar Select:

<label for="kota">Pilih Kota:</label>
<select name="kota" id="kota">
    <option value="jakarta">Jakarta</option>
    <option value="surabaya">Surabaya</option>
    <option value="bandung">Bandung</option>
    <option value="semarang">Semarang</option>
</select>

Contoh langsung:

Pilih Kota:

Atribut Penting Select:

name → nama field yang dikirim ke server
size → jumlah opsi yang tampil tanpa scroll
multiple → memungkinkan pilih lebih dari satu (pakai Ctrl+klik)
required → memastikan pengguna memilih opsi

Option Group (mengelompokkan opsi):

<select name="makanan">
    <optgroup label="Makanan Berat">
        <option value="nasi_goreng">Nasi Goreng</option>
        <option value="mie_goreng">Mie Goreng</option>
    </optgroup>
    <optgroup label="Camilan">
        <option value="pisang_goreng">Pisang Goreng</option>
        <option value="risol">Risol</option>
    </optgroup>
</select>

Pilih Menu:

Select dengan multiple (bisa pilih lebih dari satu):

<select name="hobi[]" multiple size="4">
    <option value="membaca">Membaca</option>
    <option value="olahraga">Olahraga</option>
    <option value="musik">Musik</option>
    <option value="traveling">Traveling</option>
</select>

Hobi (bisa pilih lebih dari satu - tekan Ctrl+klik):

Tekan Ctrl (Windows) atau Cmd (Mac) sambil klik untuk memilih lebih dari satu!

Studi Kasus: Form Survei Minat dan Hobi

Berikut form lengkap yang menggabungkan radio button, checkbox, dan select dropdown:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Form Survei Minat dan Hobi</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
            padding: 40px 20px;
        }
        .survey-card {
            max-width: 700px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px 30px;
        }
        .header h1 {
            font-size: 24px;
            margin-bottom: 5px;
        }
        .header p {
            opacity: 0.9;
            font-size: 14px;
        }
        form {
            padding: 30px;
        }
        .form-group {
            margin-bottom: 25px;
        }
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: #333;
        }
        .radio-group, .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .radio-group label, .checkbox-group label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: normal;
            cursor: pointer;
        }
        input[type="radio"], input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 14px;
            background: white;
            cursor: pointer;
        }
        select:focus {
            outline: none;
            border-color: #667eea;
        }
        select[multiple] {
            min-height: 120px;
        }
        button {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: translateY(-2px);
        }
        hr {
            margin: 20px 0;
            border: none;
            border-top: 1px solid #eee;
        }
        .info {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
            font-size: 13px;
            color: #666;
            border-left: 4px solid #667eea;
        }
        .info ul {
            margin-left: 20px;
            margin-top: 8px;
        }
    </style>
</head>
<body>

    <div class="survey-card">
        <div class="header">
            <h1>Survei Minat dan Hobi</h1>
            <p>Bantu kami mengenalmu lebih baik!</p>
        </div>
        
        <form action="#" method="POST">
            <div class="form-group">
                <label>Tingkat Pendidikan <span style="color: red;">*</span></label>
                <div class="radio-group">
                    <label>
                        <input type="radio" name="pendidikan" value="sd"> SD/Sederajat
                    </label>
                    <label>
                        <input type="radio" name="pendidikan" value="smp"> SMP/Sederajat
                    </label>
                    <label>
                        <input type="radio" name="pendidikan" value="sma"> SMA/Sederajat
                    </label>
                    <label>
                        <input type="radio" name="pendidikan" value="d3"> D3
                    </label>
                    <label>
                        <input type="radio" name="pendidikan" value="s1"> S1
                    </label>
                    <label>
                        <input type="radio" name="pendidikan" value="s2"> S2/S3
                    </label>
                </div>
            </div>
            
            <div class="form-group">
                <label>Status Pekerjaan <span style="color: red;">*</span></label>
                <div class="radio-group">
                    <label>
                        <input type="radio" name="pekerjaan" value="pelajar"> Pelajar/Mahasiswa
                    </label>
                    <label>
                        <input type="radio" name="pekerjaan" value="karyawan"> Karyawan Swasta
                    </label>
                    <label>
                        <input type="radio" name="pekerjaan" value="pns"> PNS/TNI/Polri
                    </label>
                    <label>
                        <input type="radio" name="pekerjaan" value="wirausaha"> Wirausaha
                    </label>
                    <label>
                        <input type="radio" name="pekerjaan" value="lainnya"> Lainnya
                    </label>
                </div>
            </div>
            
            <div class="form-group">
                <label>Hobi (bisa pilih lebih dari satu)</label>
                <div class="checkbox-group">
                    <label>
                        <input type="checkbox" name="hobi[]" value="membaca">Membaca
                    </label>
                    <label>
                        <input type="checkbox" name="hobi[]" value="olahraga"> Olahraga
                    </label>
                    <label>
                        <input type="checkbox" name="hobi[]" value="musik"> Musik
                    </label>
                    <label>
                        <input type="checkbox" name="hobi[]" value="game"> Main Game
                    </label>
                    <label>
                        <input type="checkbox" name="hobi[]" value="travel"> Traveling
                    </label>
                    <label>
                        <input type="checkbox" name="hobi[]" value="masak"> Memasak
                    </label>
                    <label>
                        <input type="checkbox" name="hobi[]" value="foto"> Fotografi
                    </label>
                </div>
            </div>
            
            <div class="form-group">
                <label>Kota Domisili <span style="color: red;">*</span></label>
                <select name="kota" required>
                    <option value="">Pilih Kota Domisili</option>
                    <optgroup label="Pulau Jawa">
                        <option value="jakarta">DKI Jakarta</option>
                        <option value="bandung">Bandung</option>
                        <option value="semarang">Semarang</option>
                        <option value="surabaya">Surabaya</option>
                        <option value="yogyakarta">Yogyakarta</option>
                    </optgroup>
                    <optgroup label="Pulau Sumatera">
                        <option value="medan">Medan</option>
                        <option value="palembang">Palembang</option>
                        <option value="padang">Padang</option>
                        <option value="pekanbaru">Pekanbaru</option>
                    </optgroup>
                    <optgroup label="Pulau Lainnya">
                        <option value="bali">Bali</option>
                        <option value="makassar">Makassar</option>
                        <option value="manado">Manado</option>
                        <option value="jayapura">Jayapura</option>
                    </optgroup>
                </select>
            </div>
            
            <div class="form-group">
                <label>Genre Film Favorit (bisa pilih lebih dari satu)</label>
                <select name="genre_film[]" multiple size="5" style="height: auto;">
                    <option value="action">Action / Laga</option>
                    <option value="komedi">Komedi</option>
                    <option value="drama">Drama</option>
                    <option value="horor">Horor</option>
                    <option value="romantis">Romantis</option>
                    <option value="animasi">Animasi</option>
                    <option value="fiksi_ilmiah">Fiksi Ilmiah</option>
                </select>
                <p style="font-size: 12px; color: #666; margin-top: 5px;">Tekan Ctrl (Windows) atau Cmd (Mac) sambil klik untuk pilih lebih dari satu</p>
            </div>
            
            <button type="submit">Kirim Survei</button>
            
            <div class="info">
                Informasi Jenis Input:
                <ul>
                    <li><strong>Radio Button</strong> → Untuk pilihan yang saling eksklusif (pendidikan, pekerjaan)</li>
                    <li><strong>Checkbox</strong> → Untuk pilihan yang bisa dipilih lebih dari satu (hobi)</li>
                    <li><strong>Select Dropdown</strong> → Untuk opsi yang banyak, menghemat tempat (kota)</li>
                    <li><strong>Select Multiple</strong> → Untuk pilih banyak opsi dalam satu field (genre film)</li>
                </ul>
            </div>
        </form>
    </div>

</body>
</html>

Tabel Perbandingan Lengkap

Aspek	Radio Button	Checkbox	Select Dropdown
Bentuk	Lingkaran	Kotak	Menu drop-down
Bisa pilih berapa?	Hanya 1	Bisa banyak	1 (atau banyak dengan multiple)
Cocok untuk	Pilihan eksklusif	Pilihan bebas	Opsi yang banyak
Semua opsi terlihat?	Ya	Ya	Tidak (kecuali size >1)
Hemat tempat?	Tidak	Tidak	Ya

Kapan Menggunakan Masing-masing?

Radio Button → Gunakan jika opsi kurang dari 6 dan pengguna hanya boleh pilih satu. Contoh: Jenis kelamin, status pernikahan, ukuran baju (S/M/L/XL).
Checkbox → Gunakan jika pengguna bisa pilih lebih dari satu. Contoh: Hobi, fitur produk, pilihan ekstra.
Select Dropdown → Gunakan jika opsi banyak (lebih dari 6) dan hanya boleh pilih satu. Contoh: Negara, provinsi, bulan lahir.
Select Multiple → Gunakan jika opsi banyak dan pengguna bisa pilih lebih dari satu. Tapi hati-hati, UX-nya kurang baik untuk pemula.

Kesalahan Umum Pemula

Radio button dengan name berbeda → Pengguna bisa memilih semua karena dianggap grup berbeda!
Lupa memberi atribut value → Server hanya menerima nilai "on" bukan nilai yang diinginkan
Checkbox dengan name sama tapi tanpa array → Hanya nilai terakhir yang terkirim. Pakai name="hobi[]" untuk multiple values.
Select dropdown tanpa opsi default → Opsi pertama otomatis terpilih, bisa membingungkan pengguna.
Menggunakan radio button untuk opsi yang bisa dipilih banyak → Harusnya pakai checkbox.

Debugging Tips:

Jika radio button dalam satu grup bisa dipilih semua → cek apakah name-nya sama persis!
Jika checkbox yang dicentang tidak terkirim semua → pastikan pakai format array name="opsi[]".
Jika select dropdown tidak mengirim nilai → pastikan setiap <option> punya atribut value.

Latihan Singkat

Buat file HTML baru dengan judul "Form Pemesanan Pizza"
Form harus memiliki:
- Radio button untuk ukuran pizza (Small, Medium, Large)
- Checkbox untuk topping (Keju, Sosis, Jamur, Paprika)
- Select dropdown untuk metode pembayaran (Transfer Bank, COD, E-Wallet)
Buat satu grup radio button untuk "Pengiriman" (Diantar / Ambil Sendiri)
Tambahkan CSS sederhana agar form rapi
Simpan dan buka di browser, coba interaksi dengan semua elemen

Intisari Hari Ini

Radio Button (type="radio") → pilih satu dari beberapa opsi
Checkbox (type="checkbox") → pilih satu atau lebih opsi
Select Dropdown (<select>) → menu pilihan menghemat tempat
Radio button dalam satu grup harus punya name yang sama
Checkbox dengan name sama perlu [] untuk kirim multiple values
Select bisa pakai <optgroup> untuk mengelompokkan opsi
Select bisa pakai multiple agar bisa pilih lebih dari satu

Tantangan Akhir Pekan: Buat sebuah Form Survei Kesehatan yang kompleks! Form harus memiliki:

Radio button untuk: Golongan darah (A, B, AB, O, Tidak Tahu)
Radio button untuk: Frekuensi olahraga (Tidak pernah, 1-2x/minggu, 3-4x/minggu, Setiap hari)
Checkbox untuk: Kebiasaan (Merokok, Konsumsi alkohol, Makan sayur, Minum suplemen)
Checkbox untuk: Gejala yang pernah dialami (Sakit kepala, Sesak napas, Nyeri dada, Pusing, Lainnya)
Select dropdown untuk: Tingkat stres (Sangat Ringan, Ringan, Sedang, Berat, Sangat Berat)
Select multiple untuk: Hari olahraga favorit (Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu)
Buat kotak penjelasan di setiap bagian: mengapa menggunakan radio button, checkbox, atau select untuk field tersebut

Gunakan CSS yang menarik (gradient, card, efek hover) agar form terlihat profesional. Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #12 - Input Text, Password, Email, Number, dan Textarea
Artikel Selanjutnya: HTML Dasar #14 - Tombol (button) dan Submit

HTML Dasar #13 - Radio Button, Checkbox, dan Select Dropdown

Ringkasan Ketiga Jenis Input Pilihan

1. Radio Button

Struktur Dasar Radio Button:

Atribut Penting Radio Button:

Contoh dengan default checked:

2. Checkbox

Struktur Dasar Checkbox:

Atribut Penting Checkbox:

Contoh checkbox dengan array name (multiple values):

3. Select Dropdown

Struktur Dasar Select:

Atribut Penting Select:

Option Group (mengelompokkan opsi):

Select dengan multiple (bisa pilih lebih dari satu):

Studi Kasus: Form Survei Minat dan Hobi

Tabel Perbandingan Lengkap

Kapan Menggunakan Masing-masing?

Kesalahan Umum Pemula

Latihan Singkat

Intisari Hari Ini

Android Kotlin - Lanjutan dari ASP.NET Core API

Categories

Main Tags

Latest Posts

Popular Posts

Android Kotlin - Lanjutan dari ASP.NET Core API

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

نموذج الاتصال