Form doldurmak bazen zahmetli bir iş gibi görünebilir. Kullanıcılara birden fazla seçenek sunarken özgürce yazmalarına olanak tanımak önemlidir. datalist öğesi (Chrome Canary'da (M20) kullanıma sunuldu) bu işlemi kolaylaştırır.
datalist öğesini kullanarak uygulamanız, kullanıcıların aralarından seçim yapması gereken önerilen sonuçların bir listesini tanımlayabilir. Listeden bir seçenek belirleyebilir veya serbest biçimli metin girebilir.
Seçenekler, input öğesinin list özelliğinde id belirtilerek bir datalist ile eşlenebilir:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
datalist, 10 sürümünden sonraki en son Firefox, Opera ve Internet Explorer'da yaygın olarak kullanılabilir. Bu nedenle, uyumluluk konusunda çok fazla endişelenmenize gerek yoktur. Ancak, 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 varsa option öğeleri hariç datalist altındaki her şey gizlenir. Bu yedek mekanizmayı kullanıyorsanız sunucunuzun sorgu parametresi olarak hem "fruit_sel" hem de "fruit" parametrelerini yakaladığından emin olun.