Dropdown Select

Membuat Elemen Dropdown (Select)

Untuk membuat dropdown, Anda akan menggunakan tag <select>. Contoh:

<select>
 <!-- Opsi Dropdown -->
 <option value="nilai1">Pilihan 1</option>
 <option value="nilai2">Pilihan 2</option>
 <option value="nilai3">Pilihan 3</option>
</select>

Menambahkan Opsi (Option) ke dalam Dropdown

Di dalam tag <select>, Anda dapat menambahkan opsi menggunakan tag <option>. Setiap <option> memiliki atribut value yang akan digunakan untuk mengidentifikasi pilihan yang dipilih.

Menambahkan Label

Anda juga dapat menambahkan label untuk dropdown menggunakan tag <label>. Ini akan membantu pengguna memahami apa yang dipilih.

<label for="dropdown">Pilih Opsi:</label>
<select id="dropdown">
 <!-- Opsi Dropdown -->
 <option value="nilai1">Pilihan 1</option>
 <option value="nilai2">Pilihan 2</option>
 <option value="nilai3">Pilihan 3</option>
</select>

Menggunakan Grup Opsi

Anda dapat mengelompokkan opsi dalam dropdown menggunakan tag <optgroup>. Ini berguna untuk mengorganisasi opsi yang serupa.

<select>
 <optgroup label="Kategori 1">
   <option value="nilai1">Pilihan 1.1</option>
   <option value="nilai2">Pilihan 1.2</option>
 </optgroup>
 <optgroup label="Kategori 2">
   <option value="nilai3">Pilihan 2.1</option>
   <option value="nilai4">Pilihan 2.2</option>
 </optgroup>
</select>

Menambahkan Atribut multiple (Multi-Select)

Jika Anda ingin mengizinkan pengguna memilih beberapa opsi sekaligus, Anda dapat menambahkan atribut multiple pada tag <select>.

<select multiple>
 <!-- Opsi Dropdown -->
 <option value="nilai1">Pilihan 1</option>
 <option value="nilai2">Pilihan 2</option>
 <option value="nilai3">Pilihan 3</option>
</select>

Semoga tutorial ini membantu Anda dalam membuat dropdown (select) dalam HTML! Anda dapat mengkustomisasi lebih lanjut dengan menggunakan CSS dan JavaScript sesuai kebutuhan Anda.

PREVIOUS
NEXT