Form doldurmak bazen zahmetli bir iş gibi gelebilir. Kullanıcılara çok seçenek sunmanın yanı sıra özgürce yazabilmelerini de sağlamak önemlidir. Chrome Canary'ye (M20) çıkan datalist öğesi sayesinde bu çok kolay.
datalist kullanıldığında uygulamanız, kullanıcıların seçmesi gereken önerilen sonuçların listesini tanımlayabilir. Listeden bir seçenek belirleyebilir veya serbest biçimli metin girebilir.
Seçenekler, bir input öğesinin list özelliğinde id belirtilerek datalist ile eşleştirilebilir:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
datalist, sürüm 10'dan sonra en son Firefox, Opera ve Internet Explorer'da yaygın olarak kullanılabilir. Uyumluluk konusunda çok fazla endişe duymanız gerekmez. Ancak, özelliğin tüm tarayıcılarda çalıştığından emin olmak istiyorsanız aşağıdakileri deneyin:
<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" />
Tarayıcınızda datalist kullanılabiliyorsa option öğeleri hariç datalist altındaki her şey gizlenir. Bu yedek mekanizmasını kullanırsanız sunucunuzun sorgu parametreleri olarak hem "fruit_sel" hem de "fruit" parametresini yakaladığından emin olun.