บางครั้งการกรอกแบบฟอร์มอาจดูยุ่งยาก การให้ตัวเลือกแก่ผู้ใช้หลายรายการแต่ยังช่วยให้ผู้ใช้พิมพ์ได้อย่างอิสระเป็นสิ่งสำคัญ องค์ประกอบ 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" เป็นพารามิเตอร์การค้นหา