<datalist> adalah daftar saran buat satu kolom isian. Begitu pengunjung mulai mengetik, browser menampilkan saran yang cocok di bawah kolomnya, kayak saran pencarian di Google. Pengunjung boleh klik salah satu saran, atau tetap mengetik isiannya sendiri.
🧪 Tebakan cepat: daftar sarannya cuma berisi Jakarta, Bandung, dan Surabaya. Bisa gak pengunjung mengisi
Bekasi? Tebak dulu, jawabannya ada di bagian "Saran, bukan aturan".
Kolom isian dengan daftar saran
<label for="kota">Kota</label>
<input id="kota" name="kota" list="daftar-kota">
<datalist id="daftar-kota">
<option value="Jakarta">
<option value="Bandung">
<option value="Surabaya">
<option value="Yogyakarta">
</datalist>
Ada dua sambungan di sini, dan dua-duanya pakai id. Kita ambil satu per satu:
<label for="kota">adalah tulisan nama kolomnya. Sama kayak di pelajaran input dan label: nilaifordi label sama denganid="kota"di input. Itu sambungan pertama.<input ... list="daftar-kota">adalah kotak isiannya. Atributlistberisi id daftar sarannya. Itu sambungan kedua.<datalist id="daftar-kota">adalah daftar sarannya. Nilaiid-nya harus sama persis denganlistdi input, huruf besar-kecilnya juga. Daftar ini gak kelihatan di halaman sampai pengunjung mengetik di kolomnya.<option value="Jakarta">adalah satu saran. Yang muncul di daftar adalah isivalue-nya. Tulis satu<option>per saran. Di dalam datalist, tag penutup</option>boleh ditulis, boleh juga gak.
Jadi satu input punya dua atribut dengan tugas beda: id buat label, list buat datalist. Datalist-nya ditulis terpisah, sesudah input, bukan di dalam input (input gak punya tag penutup).
Hasilnya: ketik "ja", browser menawarkan Jakarta. Klik sarannya, kolomnya langsung terisi Jakarta.
Saran, bukan aturan
Datalist cuma menawarkan. Pengunjung tetap boleh mengetik Bekasi walaupun gak ada di daftar, dan isian itu tetap ikut terkirim.
Kalau pengunjung harus memilih salah satu opsi dan gak boleh mengetik sendiri, pakai <select>:
<select id="kota" name="kota">
<option value="Jakarta">Jakarta</option>
<option value="Bandung">Bandung</option>
</select>
Gampangnya:
<datalist>: saran, boleh ketik bebas. Cocok buat kota, hobi, atau kata kunci pencarian.<select>: pilihan tertutup, harus pilih salah satu. Cocok buat ukuran baju atau metode pembayaran.
⚠️ Jebakan yang sering ketemu
listdanidbeda tulisan.list="daftar-kota"denganid="daftarkota"gak nyambung, jadi gak ada saran yang muncul.listdiisi id input-nya sendiri.listmenunjuk ke datalist.idinput tetap dipakai label.- Datalist dikira dropdown wajib pilih. Isian di luar daftar tetap lolos. Kalau harus dari daftar, pakai
<select>. - Datalist ditulis di dalam input.
<input>gak punya tag penutup, jadi datalist ditulis sebagai tag sendiri. - Tampilan saran beda-beda. Kotak sarannya digambar browser, jadi di HP dan laptop bisa beda, dan susah diubah pakai CSS.
TL;DR: <datalist> adalah daftar saran buat input. Sambungkan pakai <input list="x"> dan <datalist id="x"> dengan nilai yang sama persis, lalu isi datalist dengan <option value="...">, satu per saran. Input tetap punya id sendiri buat label. Pengunjung boleh pilih saran atau ketik bebas. Kalau harus pilih dari daftar, pakai <select>.
