تگ datalist در html

تگ datalist در HTML برای تعریف لیستی از گزینه‌های پیشنهادی (autocomplete) برای یک فیلد ورودی <input> استفاده می‌شود. این تگ باعث افزایش سرعت ورود اطلاعات و کاهش خطاهای تایپی می‌شود.

برای استفاده از <datalist>، باید ویژگی list را در تگ <input> تنظیم کنید تا با id تگ <datalist> مطابقت داشته باشد. گزینه‌ها با تگ <option> مشخص می‌شوند.

<label for="browser">مرورگر مورد علاقه:</label>
<input list="browsers" name="browser" id="browser">

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

تگ datalist تنها دارای ویژگی id برای اتصال به input است و بقیه ویژگی‌ها بر input اعمال می‌شوند.

تگ <datalist> از ویژگی‌های عمومی و رویدادها پشتیبانی می‌کند، اما در عمل کمتر برای آن‌ها استفاده می‌شود.

تگ <datalist> در صفحه به‌طور مستقیم نمایش داده نمی‌شود؛ بلکه گزینه‌های آن در لیست پیشنهادی ورودی ظاهر می‌شوند.