قد يكون ملء النماذج أحيانًا أمرًا صعبًا. من المهم منح المستخدمين خيارات متعدّدة مع السماح لهم بالكتابة بحرية. يتيح لك عنصر 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 كمَعلمتَي طلب بحث.