این آموزش در تاریخ ۱۴۰۰/۰۹/۲۳ آپدیت شده است.
آموزش تگ datalist در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ datalist در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Datalist در HTML
تگ datalist
تگی است که با استفاده از آن میتوان یک لیست از مقادیر / گزینه های از پیش تعریف شده را ایجاد نمود.
مثلا میخوایم یه لیست درست کنیم که وقتی کاربر روی Input کلیک کرد اون لیست بهش نشون داده بشه و کاربر بتونه یه گزینه رو از بین آیتم ها انتخاب کنه ، به همین سادگی
نحوه استفاده :
- باید اول با استفاده از صفت List در درون تگ Input نام لیستمون رو تعریف کنیم، بعدش این نام را در درون صفت Id در درون تگ datalist قرار دهیم.
- و در نهایت با استفاده از تگ Option در درون تگ datalist میتونیم گزینه ها / آیتم هامون رو تعریف نماییم.
Free-Learn
مثال از تگ datalist در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : یه لیست از مرورگرهای اینترنتی ایجاد کردم بعد به کاربر گفتم مثلا مرورگر مورد علاقتو انتخاب کن. ( معمولا یا یکبار یاهم دوبار باید روی Input کلیک کرد تا لیست نمایش داده بشه )
1 2 3 4 5 6 7 8 9 |
<input list="browsers" name="browser"> <datalist id="browsers"> <option value="Microsoft Edge"> <option value="Mozilla Firefox"> <option value="Google Chrome"> <option value="Opera"> <option value="Safari"> </datalist> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ datalist
در HTML پشتیبانی میکنند یا خیر.
نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
پشتیبانی | ۲۰ | بله | ۱۲٫۱ | ۱۲٫۱ | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ datalist
از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- باید مقداری که درون صفت name هستش با مقداری که درون صفت id هستش یکی باشه.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ datalist
را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
1 2 3 |
datalist { display: none; } |