Membuat ComboBox Bisa Search dengan HTML

Dipublikasikan oleh Muhammad Zen pada

Halo teman-teman semua. apa kabar?. semoga dalam keadaan sehat dan bahagia. Kali ini kita akan membahas tentang Membuat ComboBox Bisa Search dengan HTML. Jika kamu belum mengikuti materi sebelumnya, silahkan kunjungi halamanĀ kursus.

Pendahuluan

Membuat sebuah combobox dengan html bisa dilakukan dengan tag select. Namun ada sedikit kekurangan dari tag tersebut yaitu kita harus mencari sendiri pilihan.

Jika pilihan dari sebuah combobox sedikit maka tidak masalah. Namu Jika pilihan nya ada banyak. Maka mencari data di pilihan tersebut sangat merepotkan.

Oleh karena itu maka ada baiknya kita mengenal tag yang dapat menampikan pilihan. Dan pilihan tersebut bisa di searching. Tag tersebut adalah input dan datalist.

Membuat ComboBox Bisa Search dengan HTML

Langsung saja kita lihat contoh membuat combobox yang bisa search tersebut.

<label for="pilih">Pilih Web Browser:</label>
<input list="data" name="wb" id="pilih">

<datalist id="data">
  <option value="Microsoft Edge">
  <option value="Mozilla Firefox">
  <option value="Google Chrome">
</datalist>

Penjelasan kode di atas.

  • Atribut for.
    Jika mengklik label sama dengan memilih tag input. Itu karena for=”pilih” dan id=”pilih”.
  • Atribut list.
    Value dari iniput akan mengambil data dari datalist. Itu karena list=”data” dan id=data.
  • Atribut name.
    Atribut name hanya ada di tag input.

Latihan

Berikut latihan yang bisa kamu ikuti. Buat 2 file yaitu datalist.php dan aksi_datalist.php. Kirimkan data dari datalist.php ke aksi_datalist.php menggunakan form. Isi datalist.php seperti contoh kode di atas.

Penutup

Terima Kasih sudah membaca artikel ini. Jika artikel ini membantu kamu. Silahkan tinggalkan komentar positif. Komentar positif kamu adalah motivasi bagi penulis dalam membuat artikel. Sekian untuk materi kali ini. Jika kamu ingin kursus secara langsung, kami membuka kelas baru. Silahkan hubungi kontak kami di menu.

Kategori: FormHTML

0 Komentar

Tinggalkan Balasan

Avatar placeholder

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *