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.