<datalist> ট্যাগটি <input> ট্যাগের জন্য পূর্ব-নির্ধারিত অপশন সেট করতে ব্যবহৃত হয়। ব্যবহারকারী যখন <input> ফিল্ডে মাউস কার্সর রাখে, তখন এই পূর্ব-নির্ধারিত অপশনগুলো দৃশ্যমান হয়।
এখন HTML-এ <datalist> ট্যাগ বাস্তবায়নের উদাহরণ দেখি:
উদাহরণ
<!DOCTYPE html> <html> <body> <p>প্রিয় বিষয়</p> <form action="" method="get"> <input list="subject" name="subject"> <datalist id="subject"> <option value="Programming"> <option value="Networking"> <option value="Database"> <option value="Big Data"> <option value="Cloud"> <option value="Framework"> </datalist> <input type="submit"> </form> </body> </html>
আউটপুট
এখন ইনপুট বক্সের ভিতরে মাউস কার্সর রাখুন। নিচের পূর্ব-নির্ধারিত অপশনগুলো এখন দৃশ্যমান হবে:
উপরের উদাহরণে, আমরা <input>-এর জন্য পূর্ব-নির্ধারিত অপশন সেট করেছি:
<datalist id="subject"> <option value="Programming"> <option value="Networking"> <option value="Database"> <option value="Big Data"> <option value="Cloud"> <option value="Framework"> </datalist>
এখন, উপরের <input>-এ কার্সর রাখলে, নিচের অপশনগুলো দৃশ্যমান হবে, যা আমরা <datalist> এলিমেন্ট ব্যবহার করে পূর্ব-নির্ধারিত করেছিলাম:
Programming Networking Database Big Data Cloud Framework
