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.