تگ datalist در HTML

  /  فرانت اند   /  HTML   /  تگ datalist در HTML

با استفاده از تگ datalist  در HTML میتوان یک لیست از پیش تعریف شده ( مقادیر پیش فرض ) را برای عنصر <input> تعریف کرد.

مثال

<label for="browser">مرورگر خود را از لیست انتخاب کنید:</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>


تعریف و کاربرد

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

تگ <datalist> به صورت اتومات مقادیر پیش فرضی که از قبل درونش تعریف شده را درون عنصر <input> نمایش می دهد به طوری که کاربر بعد از وارد کردن یک واژه ، لیستی از مقادیر پیش فرض و پیشنهادی تگ <datalist> را مشاهده میکند.

نکته: مقدار ID در تگ <datalist> باید با مقدار list در تگ <input> برابر باشد ، این امر باعث اتصال تو عنصر بهم می شود و خروجی datalist را میتوان در عنصر مربوطه input مشاهده کرد.


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

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل عنصر را پشتیبانی می کند.

عنصر
<datalist>20.010.04.012.19.5

خواص عمومی

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

رویداد های عمومی

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

تنظیمات پیش فرض CSS

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

datalist {
  display: none;
}

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر