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