מילוי טפסים נראה לפעמים מסורבל. חשוב לתת למשתמשים אפשרויות בחירה מרובות, אך גם לאפשר להם להקליד בחופשיות. עם האלמנט 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" כפרמטרים של שאילתה.