לפעמים מילוי טפסים נראה כמו משימה מסורבלת. חשוב לתת למשתמשים אפשרויות מרובות, אבל גם לאפשר להם להקליד באופן חופשי. הרכיב datalist (שנוסף לאחרונה ל-Chrome Canary (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 זמין באופן נרחב בגרסאות העדכניות ביותר של Firefox, Opera ו-Internet Explorer אחרי גרסה 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' כפרמטרים של שאילתה.