ট্যাগ datalist

ট্যাগ datalist HTML ফর্মের ইনপুট ফিল্ড input এর জন্য অটোকমপ্লিট তৈরি করে।

অটোকমপ্লিটের মূল কথা: যখন ব্যবহারকারী ইনপুট ফিল্ডে কিছু টাইপ করার চেষ্টা করবে, নীচে একটি পপ-আপ টুলটিপ প্রদর্শিত হবে, যা উপলব্ধ পছন্দের তালিকা হিসেবে উপস্থাপিত হবে। ব্যবহারকারী সম্পূর্ণ টাইপ না করেই প্রস্তাবিত বিকল্পগুলির মধ্যে একটি বেছে নিতে পারবে।

input ট্যাগের সাথে অটোকমপ্লিট সংযুক্ত করতে, এটিকে অবশ্যই list অ্যাট্রিবিউট দিতে হবে, যেখানে সংযুক্ত ট্যাগ datalist এর id অ্যাট্রিবিউট উল্লেখ করতে হবে।

পছন্দের বিকল্পগুলি option ট্যাগে সংরক্ষিত থাকে, যা আবার datalist ট্যাগের মধ্যে সংরক্ষিত থাকে।

উদাহরণ

আসুন ইনপুট ফিল্ডে একটি দেশের নাম লিখি। প্রথমে 'b' অক্ষর লিখি - এবং তিনটি দেশের একটি পপ-আপ টুলটিপ দেখতে পাব। তারপর আরও একটি অক্ষর 'e' লিখি - প্রস্তাবিত দেশের সংখ্যা দুইটিতে কমে যাবে:

<input type="text" list="country">
<datalist id="country">
	<option>Belarus</option>
	<option>Belgium</option>
	<option>Bulgaria</option>
</datalist>

উদাহরণ

আসুন এখন option ট্যাগে value অ্যাট্রিবিউট যোগ করি। একটি নির্দিষ্ট দেশ নির্বাচন করলে, সংযুক্ত ইনপুট ফিল্ডে দেশের নাম নয়, বরং value অ্যাট্রিবিউটের বিষয়বস্তু যাবে:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - a country of lakes and potatoes</option>
	<option value="Belgium">Belgium - a country where Belgians live</option>
	<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>

উদাহরণ . autocomplete অ্যাট্রিবিউটের প্রভাব

পপ-আপ সুপারিশের তালিকায় autocomplete অ্যাট্রিবিউট প্রভাব ফেলে। যদি এটি চালু থাকে (যা ডিফল্টভাবে থাকে), তবে আপনি datalist ট্যাগে যে মানগুলি সেট করেছেন সেগুলির সাথে সেই মানগুলি মিশে যাবে, যেগুলি ব্যবহারকারী পূর্বে এই ফিল্ডে প্রবেশ করিয়েছিল।

ফিল্ডে 'Brazil' লিখুন এবং সাবমিট বাটনে ক্লিক করুন (সাবমিট না করলে ব্রাউজার এই দেশটি মনে রাখবে না)। তারপর এই উদাহরণে ফিরে আসুন এবং 'b' অক্ষর লিখুন - প্রদর্শিত তালিকায় আপনি datalist থেকে 3টি দেশ ছাড়াও পূর্বে প্রবেশ করানো দেশটি দেখতে পাবেন (এছাড়াও, যদি আপনি 'Belarus' শব্দ দিয়ে একই কাজ করেন - ড্রপডাউন তালিকায় এই মানটি দুইবার থাকবে)।

যদি এটি আপনাকে বিরক্ত করে - autocomplete অ্যাট্রিবিউটটি বন্ধ করুন, এতে off মান যোগ করে।

উপরে বর্ণিত ম্যানিপুলেশনগুলি এই উদাহরণ দিয়ে করুন:

<form action="">
	<input type="text" list="country" autocomplete="on">
	<datalist id="country">
		<option>Belarus</option>
		<option>Belgium</option>
		<option>Bulgaria</option>
		<input type="submit">
	</datalist>
</form>

আরও দেখুন

autocomplete অ্যাট্রিবিউট,
যা ফর্ম ফিল্ডে অটোকমপ্লিট সেট করে