Elemen Dropdown: Menguasai Select, Option, dan Optgroup

Elemen Dropdown: Menguasai Select, Option, dan Optgroup

Dalam formulir web, sering kali kita memiliki daftar pilihan yang sangat panjang. Jika kita menggunakan Radio Button, halaman akan menjadi sangat penuh dan berantakan. Solusi terbaik untuk menghemat ruang sekaligus menjaga kerapian adalah menggunakan elemen Dropdown.

HTML menyediakan tiga tag utama untuk membangun dropdown yang terstruktur: <select>, <option>, dan <optgroup>.

1. <select>: Sang Kontainer

Tag ini berfungsi sebagai pembungkus utama yang menciptakan kotak dropdown.

• Atribut Penting:

  • name: Kunci data yang akan dibaca oleh server (misal: saat diproses oleh Laravel/PHP).

  • required: Memastikan pengguna memilih salah satu opsi sebelum mengirim form.

  • multiple: Memungkinkan pengguna memilih lebih dari satu opsi (jarang digunakan untuk dropdown standar).

2. <option>: Pilihan Individual

Tag ini diletakkan di dalam <select> untuk mendefinisikan setiap item yang bisa dipilih.

• Atribut Penting:

  • value: Data asli yang dikirim ke database (biasanya berupa kode unik atau ID).

  • selected: Digunakan jika Anda ingin salah satu opsi terpilih secara otomatis saat halaman dimuat.

3. <optgroup>: Pengelompokan Logis

Ini adalah fitur "pro" yang sering dilupakan. Tag ini digunakan untuk mengelompokkan beberapa <option> yang berkaitan dalam satu kategori judul yang tidak bisa diklik.

• Manfaat: Memudahkan pengguna memindai daftar pilihan yang banyak dan kompleks.

Tutorial: Implementasi Pemilihan Klasifikasi Akun (Kasus Baru)

Mari kita buat formulir pelaporan yang menggunakan pengelompokan untuk memilih Bagan Akun (Chart of Accounts) dalam pencatatan jurnal keuangan.

<form action="/simpan-jurnal" method="POST"> <label for="kode_akun">Pilih Klasifikasi Akun:</label><br> <select name="account_code" id="kode_akun" required> <option value="" disabled selected>-- Pilih Kategori Akun --</option> <optgroup label="Aset (Aktiva)"> <option value="111">Kas dan Setara Kas</option> <option value="112">Piutang Usaha</option> <option value="121">Aset Tetap</option> </optgroup> <optgroup label="Kewajiban (Pasiva)"> <option value="211">Hutang Usaha</option> <option value="212">Hutang Pajak</option> </optgroup> <optgroup label="Beban (Expenses)"> <option value="511">Beban Operasional</option> <option value="512">Beban Gaji Karyawan</option> </optgroup> </select> <br><br> <button type="submit">Simpan Jurnal</button>
</form>

Tips Profesional untuk Developer

• Placeholder: Selalu gunakan <option value="" disabled selected> di baris pertama agar pengguna tahu mereka harus memilih, bukan sekadar mengirimkan pilihan pertama secara tidak sengaja.

• Value vs Teks: Gunakan value yang berupa kode unik (seperti 111 atau 511) untuk konsistensi di database, sementara teks di dalam tag (seperti "Kas dan Setara Kas") dibuat deskriptif dan ramah untuk dibaca manusia.

• Aksesibilitas: Selalu hubungkan <label> dengan <select> menggunakan atribut for dan id yang sama agar pengguna tunanetra (screen reader) dapat menavigasi formulir Anda dengan mudah.

Tabel Ringkasan Elemen

Kesimpulan

Dropdown adalah elemen UI yang sangat kuat untuk menyederhanakan formulir yang kompleks. Dengan memaksimalkan penggunaan <optgroup>, Anda memberikan struktur navigasi dan klasifikasi data yang jauh lebih baik bagi pengguna, sehingga mereka tidak kebingungan saat dihadapkan pada puluhan bahkan ratusan opsi data.