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

آموزش تگ datalist در HTML

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

آموزش تگ datalist در HTML

Free-Learn

تگ Datalist در HTML

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

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

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

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

Free-Learn

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

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

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

امتحان کنید

Free-Learn

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

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

نام مرورگر Chrome Firefox Opera Safari Edge
پشتیبانی ۲۰ بله ۱۲٫۱ ۱۲٫۱ بله

Free-Learn

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

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

Free-Learn

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

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

Free-Learn

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

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


Free-Learn

دریافت PDF یا پرینت این مطلب