Membuat Form Multi Select

Membuat Form Multi Select - Pada postingan beberapa waktu yang lalu sinahu coding sudah menyinggung tentang HTML Form, yang meliputi dasar membuat Form dan juga Attribute serta fungsi-fungsinya pada HTML Form. Di sana juga sudah di bahas salah satu elemen form yang paling penting untuk membuat form, yaitu elemen input.

Nah, sekarang kita lanjutkan kembali ke elemen-elemen form yang lain. Kali ini tentang elemen form yang fungsinya untuk membuat form multi select, form dengan beberapa pilihan. Untuk membuat form multi select ini dibutuhkan dua elemen form, yaitu <select> dan <option>.

Dasar Membuat Form Multi Select

Sebagai contoh di bawah ini adalah gambaran form multi select untuk pencarian musik berdasarkan genrenya.

<form action="search.php">
<select name="musik">
<option value="Pop">Pop</option>
<option value="Rock">Rock</option>
<option value="Country">Country</option>
<option value="RNB">RNB</option>
</select>
<br><br>
<input type="submit">
</form>

Keterangan :

- <select> untuk membuatnya terlihat drop-down list
- <option> untuk membuat opsi yang akan menjadi pilihan

Maka hasilnya akan seperti ini :

 Pop Rock Country RNB  

Untuk membuat form multi select juga bisa menggunakan elemen form , elemen form tambahan terbaru yang support di HTML5. Contoh penerapan kodenya seperti ini : 

<form action="search.php">

<input list="musik" name="musik">
<datalist id="musik">
  <option value="Pop">
  <option value="Country">
  <option value="Rock">
  <option value="RNB">
</datalist>
<input type="submit">
</form>

Hasilnya seperti ini : 

 

Itulah sedikit penjelasan untuk membuat form multi select. Semoga bisa dipahami dan bermanfaat untuk bekal coding konco sinahu. Ditunggu kreasinya ya.