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.