تگ datalist در HTML

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

تگ datalist چیست؟

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

کاربران با دابل کلیک بر روی فیلد مورد نظر یا جستجوی متنی، با لیستی از داده ها مواجه می شوند که قابلیت انتخاب دارند.

برای افزودن داده ها باید از تگ option کمک بگیریم.

این تگ با <datalist> شروع شده و با </datalist> پایان می یابد.

<datalist></datalist>

مثال تگ datalist

کد:

<form>
  <input list="colors" placeholder="Text">
  <datalist id="colors">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
  </datalist>
</form>

اجرا

1- ابتدا یک فرم را با استفاده از تگ form تعریف کردیم.

2- با استفاده از تگ input فیلدی را جهت جستجو کاربران ساختیم.

3- برای اتصال تگ datalist به تگ input از صفت list استفاده کردیم.

4- مقدار صفت list تگ input بایستی با مقدار صفت id تگ datalist برابر باشد.

5- با استفاده از تگ option داده های مدنظر را درون لیست داده ها قرار دادیم.

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

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

datalist {
  display: none;
}

سازگاری با مرورگرها

تگ datalist با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS