Mengisi formulir terkadang terasa merepotkan. Memberi pengguna beberapa pilihan sekaligus memungkinkan mereka mengetik dengan bebas adalah hal yang penting. Elemen datalist
(yang baru saja diluncurkan di Chrome Canary (M20) memudahkan hal ini.
Dengan menggunakan datalist
, aplikasi Anda dapat menentukan daftar hasil yang disarankan yang harus dipilih pengguna. Mereka dapat memilih opsi dari daftar atau memasukkan teks bebas.
Opsi dapat disambungkan dengan datalist
dengan menentukan id
-nya dalam atribut list
elemen input
:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
datalist
tersedia secara luas di Firefox, Opera, dan Internet Explorer terbaru setelah versi 10. Jadi, Anda tidak perlu terlalu khawatir dengan kompatibilitas, tetapi jika ingin memastikannya berfungsi di seluruh browser, coba hal berikut:
<datalist id="fruits">
Pick your favorite fruit
<select name="fruit_sel">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Peach">Peach</option>
</select>
or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />
Jika datalist
tersedia di browser Anda, semua yang ada di bagian datalist
kecuali elemen option
akan disembunyikan. Jika Anda menggunakan mekanisme penggantian ini, pastikan server Anda menangkap “fruit_sel” dan “fruit” sebagai parameter kueri.