آموزش تگ datalist در HTML

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

آموزش تگ datalist در HTML

Free-Learn

تگ Datalist در HTML

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

یک لیست از گزینه های، از پیش تعریف شده که با کلیک بروی یک عنصر/تگ ورودی (Input) به کاربر نمایش داده می شود و کاربر قادر به انتخاب یکی از آن گزینه ها می باشد.

نحوه استفاده :: باید با استفاده از صفت List در درون تگ Input ، نام لیست مان را تعریف نماییم، سپس این نام را در درون صفت Id در درون تگ datalist قرار میدهیم.

در واقع میتوان گفت نامی که در درون صفت List و صفت Id قرار دارد باید یکسان باشد.

سپس در نهایت با استفاده از تگ Option در درون تگ datalist میتوان گزینه ها/مقادیر از پیش تعریف شده را تعریف/مشخص کرد.

Free-Learn

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

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

امتحان کنید

Free-Learn

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

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

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی ۲۰٫۰ ۴٫۰ ۹٫۰ خیر ۱۰٫۰

Free-Learn

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

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

Free-Learn

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

تگ datalist یک تگ جدید/اضافه شده در HTML5 می باشد.

Free-Learn

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

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


Free-Learn