پر کردن فرم ها گاهی اوقات کاری دست و پا گیر به نظر می رسد. دادن انتخاب چندگانه به کاربران و در عین حال امکان تایپ آزادانه به کاربران مهم است. عنصر datalist (که به تازگی بر روی کروم قناری (M20) قرار گرفته است، این امر را بسیار خوب می کند.
با استفاده از datalist ، برنامه شما می‌تواند فهرستی از نتایج پیشنهادی را که کاربران باید انتخاب کنند، تعریف کند. آنها می توانند گزینه ای را از لیست انتخاب کنند یا متن آزاد را وارد کنند.
گزینه ها را می توان با یک datalist با تعیین id آن در ویژگی list عنصر input جفت کرد:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
datalist پس از نسخه 10 به طور گسترده در آخرین فایرفاکس، اپرا و اینترنت اکسپلورر در دسترس است. بنابراین لازم نیست زیاد نگران سازگاری آن باشید، اما اگر می خواهید مطمئن شوید که در بین مرورگرها کار می کند، موارد زیر را امتحان کنید:
<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" />
اگر datalist در مرورگر شما موجود باشد، همه چیز در datalist به جز عناصر option پنهان می شود. اگر از این مکانیسم بازگشتی استفاده می‌کنید، مطمئن شوید که سرور شما هم «fruit_sel» و هم «fruit» را به‌عنوان پارامترهای جستجو می‌گیرد.