Select dan Option

Checkbox dan radio menampilkan seluruh pilihan sekaligus, dan cara itu terasa luas begitu pilihannya mencapai belasan hingga puluhan opsi. Untuk daftar panjang, HTML menyediakan select: kontrol yang menyimpan banyak opsi di dalam option dan hanya memperlihatkan pilihan terpilih. Chapter ini membahas susunan select dan option, atribut value dan selected, optgroup, opsi multi-select, hingga pemilihan antar select dan radio.

select dan option: Dasar Dropdown #

Elemen select menjadi wadah, dan setiap option di dalamnya menjadi satu pilihan. Tanpa atribut tambahan, browser merendernya sebagai dropdown yang terbuka menjadi daftar ketika diklik. Nilai yang dikirim berasal dari opsi terpilih, dan atribut name milik select menjadi kunci data — option tidak membawa name sendiri.

Atribut value dan selected #

Setiap option membawa dua hal yang perlu dibedakan: teks yang terlihat pengunjung dan nilai yang terkirim. Atribut value menyatakan nilai tersebut, sehingga teks yang ramah pembaca boleh berbeda dari kode pendek milik sistem. Bila value tidak ditulis, browser memakai teks konten option sebagai nilai terkirim.

Atribut selected menandai opsi terpilih sejak halaman dimuat; tanpa itu, opsi pertama menjadi terpilih secara bawaan. Pada select biasa, hanya satu opsi yang boleh membawa selected; pada multi-select, beberapa opsi boleh membawanya sekaligus.

Mengelompokkan Opsi dengan optgroup #

Daftar panjang menjadi mudah dipindai bila opsi sejenis dikelompokkan. Elemen optgroup membungkus beberapa option dan wajib membawa atribut label, yang tampil sebagai judul kelompok di dalam dropdown. Judul kelompok hanya penanda; yang dapat dipilih hanyalah opsi di dalamnya.

Multi-select: size dan multiple #

Dua atribut mengubah perilaku tampilan select. Atribut multiple membolehkan pengunjung memilih lebih dari satu opsi, dan browser otomatis mengganti dropdown menjadi kotak daftar — tanpa size, kotaknya setinggi empat opsi. Atribut size menyatakan banyaknya opsi yang tampak sekaligus; nilai di atas satu menghasilkan kotak daftar tanpa multiple.

Opsi Placeholder #

select tidak memiliki atribut placeholder, tetapi kebutuhan petunjuk “pilih salah satu” tetap ada. Pola yang lazim adalah opsi pertama yang membawa tiga atribut sekaligus: value="" agar nilainya kosong, disabled agar tidak dapat dipilih pengunjung, dan selected agar tampil sebagai pilihan awal. Opsi semacam ini tampil seperti teks petunjuk, bukan pilihan yang sah.

Kapan select, Kapan radio #

Keduanya menjawab pertanyaan “pilih satu”, sehingga penentuannya kembali ke pertimbangan kegunaan:

Aturan praktisnya: radio memberi kejelasan dengan menukar ruang, sedangkan select menghemat ruang dengan tambahan satu klik.

Contoh: Pemilihan Kota dengan optgroup #

Toko Budi menghitung ongkir berdasarkan kota tujuan, dan daftar kotanya memanjang. Simpan file berikut sebagai pemilihan-kota.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pemilihan Kota dengan optgroup</title>
</head>
<body>
  <h1>Pilih Kota Tujuan Pengiriman</h1>
  <form>
    <p>
      <label for="kota">Kota tujuan</label>
      <select id="kota" name="kota">
        <option value="" disabled selected>Pilih kota…</option>
        <optgroup label="Sumatra">
          <option value="medan">Medan</option>
          <option value="padang">Padang</option>
        </optgroup>
        <optgroup label="Jawa">
          <option value="jakarta">Jakarta</option>
          <option value="bandung">Bandung</option>
          <option value="surabaya">Surabaya</option>
        </optgroup>
        <optgroup label="Sulawesi">
          <option value="makassar">Makassar</option>
          <option value="manado">Manado</option>
        </optgroup>
      </select>
    </p>
    <p>
      <input type="submit" value="Cek Ongkir">
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Dropdown bertuliskan "Pilih kota…" sebelum dipilih
  - Saat terbuka: judul kelompok Sumatra, Jawa, dan Sulawesi
    yang tidak dapat dipilih
  - Opsi kota di bawah masing-masing judul kelompok
  - Tombol "Cek Ongkir" di bagian bawah

Berikut peran setiap bagian kode:

1. Baris 13 (select): wadah pilihan dengan name="kota" sebagai kunci data; tanpa size dan multiple, kontrol tampil sebagai dropdown.
2. Baris 14: opsi placeholder dengan value="", disabled, dan selected — tampil sebagai petunjuk awal dan tak dapat dipilih.
3. Baris 15, 19, 24 (optgroup): tiga kelompok dengan atribut label sebagai judul yang tidak bisa dipilih.
4. Baris 16-17 dan seterusnya (option): opsi kota dengan value pendek, misalnya medan, berbeda dari teks tampilannya.
5. Baris 31 (input type="submit"): tombol yang memicu pengiriman.

Dengan select, tujuh kota dan tiga kelompoknya tersembunyi di balik satu baris tampilan. Chapter berikutnya beralih ke kebutuhan sebaliknya: teks panjang yang tidak muat satu baris, dan jawabannya adalah elemen textarea.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen select
• MDN Web Docs — Elemen option
• MDN Web Docs — Elemen optgroup
• web.dev — Learn Forms

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pemilihan Kota dengan optgroup</title>
</head>
<body>
  <h1>Pilih Kota Tujuan Pengiriman</h1>
  <form>
    <p>
      <label for="kota">Kota tujuan</label>
      <select id="kota" name="kota">
        <option value="" disabled selected>Pilih kota…</option>
        <optgroup label="Sumatra">
          <option value="medan">Medan</option>
          <option value="padang">Padang</option>
        </optgroup>
        <optgroup label="Jawa">
          <option value="jakarta">Jakarta</option>
          <option value="bandung">Bandung</option>
          <option value="surabaya">Surabaya</option>
        </optgroup>
        <optgroup label="Sulawesi">
          <option value="makassar">Makassar</option>
          <option value="manado">Manado</option>
        </optgroup>
      </select>
    </p>
    <p>
      <input type="submit" value="Cek Ongkir">
    </p>
  </form>
</body>
</html>