آموزش HTML – تگ datalist

نویسنده : مرتضی گنج | تاریخ انتشار : 2019/12/29 | بخش : آموزش HTML

تعریف و کاربرد تگ datalist در HTML

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

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

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

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

نکات کاربردی از تگ datalist

  • تگ <datalist> یک لیست از گزینه های از قبل تعریف شده برای یک عنصر <input> مشخص می کند.
  • تگ <datalist> برای ارائه یک ویژگی “تکمیل خودکار” برای عنصر <input> استفاده می شود. بدین صورت که کاربران یک لیست کشویی از گزینه های از پیش تعریف شده در هنگام تکمیل فیلد، مشاهده می کنند.
  • شما می توانید با استفاده از یک عنصر <datalist>، لیست اجزای <input> را به هم متصل کنید.

 

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

<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

تمرین کنید !

 

پشتیبانی مرورگرها از تگ <datalist >

Element
<datalist> ۲۰٫۰ ۴٫۰ ۱۰٫۰ خیر ۹٫۰