ফর্ম পূরণ করা কখনও কখনও কষ্টকর জিনিস মনে হয়. ব্যবহারকারীদের একাধিক পছন্দ দেওয়া তবুও তাদের স্বাধীনভাবে টাইপ করতে সক্ষম করা গুরুত্বপূর্ণ। datalist উপাদান (যা সবেমাত্র ক্রোম ক্যানারি (M20) এ অবতরণ করেছে এটিকে একটি হাওয়ায় পরিণত করে৷
datalist ব্যবহার করে, আপনার অ্যাপ ব্যবহারকারীদের থেকে নির্বাচন করা উচিত প্রস্তাবিত ফলাফলের একটি তালিকা নির্ধারণ করতে পারে। তারা হয় তালিকা থেকে একটি বিকল্প নির্বাচন করতে পারে বা ফ্রিফর্ম পাঠ্য লিখতে পারে।
একটি input উপাদানের list বৈশিষ্ট্যে তার id নির্দিষ্ট করে একটি datalist সাথে বিকল্পগুলি যুক্ত করা যেতে পারে:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
10 সংস্করণের পরে সর্বশেষ ফায়ারফক্স, অপেরা এবং ইন্টারনেট এক্সপ্লোরারে datalist ব্যাপকভাবে উপলব্ধ। তাই আপনাকে সামঞ্জস্যতা নিয়ে খুব বেশি চিন্তা করতে হবে না, তবে আপনি যদি নিশ্চিত করতে চান যে এটি ব্রাউজার জুড়ে কাজ করে তবে নিম্নলিখিতগুলি চেষ্টা করুন:
<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 উপলব্ধ থাকে, তবে option উপাদানগুলি ছাড়া datalist অধীনে সমস্ত কিছু লুকানো হবে। আপনি যদি এই ফলব্যাক মেকানিজম ব্যবহার করেন, তাহলে নিশ্চিত করুন যে আপনার সার্ভার "fruit_sel" এবং "fruit" উভয়কেই ক্যোয়ারী প্যারামিটার হিসেবে ধরেছে।