Mengisi formulir terkadang terasa
seperti hal yang rumit. Memberikan pengguna pilihan ganda namun memungkinkan mereka mengetik dengan bebas sangatlah penting. Elemen datalist (yang baru saja diluncurkan di Chrome Canary (M20)) menjadikannya mudah.
Dengan menggunakan datalist, aplikasi Anda dapat menentukan daftar hasil yang disarankan yang harus dipilih pengguna. Ia dapat memilih opsi dari daftar atau memasukkan teks bentuk 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 mengkhawatirkan kompatibilitas. Namun, jika ingin memastikan kompatibilitas tersebut 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 menangkap "fruit_sel" dan "fruit" sebagai parameter kueri.