آموزش تگ datalist در HTML

این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.

آموزش تگ datalist در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ datalist در HTML با من همراه باشید.

تگ Datalist در HTML

تگ datalist تگی است که با استفاده از آن میتوان یک لیست از مقادیر / گزینه های از پیش تعریف شده را ایجاد نمود.

مثلا میخوایم یه لیست درست کنیم که وقتی کاربر روی Input کلیک کرد اون لیست بهش نشون داده بشه و کاربر بتونه یه گزینه رو از بین آیتم ها انتخاب کنه ، به همین سادگی

نحوه استفاده :

• باید اول با استفاده از صفت List در درون تگ Input نام لیستمون رو تعریف کنیم، بعدش این نام را در درون صفت Id در درون تگ datalist قرار دهیم.
• و در نهایت با استفاده از تگ Option در درون تگ datalist میتونیم گزینه ها / آیتم هامون رو تعریف نماییم.

مثال از تگ datalist در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

مثال شماره ۱ : یه لیست از مرورگرهای اینترنتی ایجاد کردم بعد به کاربر گفتم مثلا مرورگر مورد علاقتو انتخاب کن. ( معمولا یا یکبار یاهم دوبار باید روی Input کلیک کرد تا لیست نمایش داده بشه )

امتحان کنید

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ datalist در HTML پشتیبانی میکنند یا خیر.

پشتیبانی از صفات و رویدادهای عمومی

تگ datalist از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

نکات و توضیحات

• باید مقداری که درون صفت name هستش با مقداری که درون صفت id هستش یکی باشه.

دستورات CSS پیش فرض

معمولا مرورگرها تگ datalist را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.