مرجع عناصر HTML : عنصر <datalist>
عنصر HTML <datalist> شامل مجموعهای از عناصر <option> است که گزینههای مجاز یا توصیهشدهی موجود برای انتخاب از بین کنترلهای دیگر را نشان میدهند.
برای اتصال عنصر به کنترل، یک شناسه منحصر به فرد در ویژگی id به آن میدهیم و سپس ویژگی list را به عنصر با همان شناسه value اضافه میکنیم. فقط انواع خاصی از از این رفتار پشتیبانی میکنند و همچنین میتواند از مرورگری به مرورگر دیگر متفاوت باشد.
هر عنصر باید یک ویژگی value داشته باشد که نشان دهنده پیشنهادی برای وارد کردن در ورودی است. همچنین میتواند یک ویژگی label داشته باشد، یا در صورت عدم وجود آن، مقداری محتوای متنی داشته باشد که ممکن است توسط مرورگر به جای value (فایرفاکس) یا علاوه بر value (کروم و سافاری، به عنوان متن تکمیلی) نمایش داده شود. محتوای دقیق منوی کشویی به مرورگر بستگی دارد، اما هنگام کلیک، محتوای وارد شده در فیلد کنترل همیشه از ویژگی value میآید.
جایگزینی برای نیست. یک خود یک ورودی را نشان نمیدهد. این لیستی از مقادیر پیشنهادی برای یک کنترل مرتبط است. کنترل همچنان میتواند هر مقداری را که اعتبارسنجی را پشت سر بگذارد، بپذیرد، حتی اگر در این لیست پیشنهادات نباشد.
این عنصر هیچ ویژگی دیگری به جز ویژگیهای سراسری که برای همه عناصر مشترک است، ندارد.
هنگام تصمیمگیری برای استفاده از عنصر ، در اینجا به برخی از مسائل مربوط به دسترسیپذیری که باید در نظر داشته باشید، اشاره میکنیم:
- اندازه فونت گزینههای لیست دادهها بزرگنمایی نمیشود و همیشه به یک اندازه باقی میماند. محتویات پیشنهاد خودکار هنگام بزرگنمایی یا کوچکنمایی بقیه محتوا، افزایش یا کاهش نمییابد.
- از آنجایی که هدفگیری لیست گزینهها با CSS بسیار محدود به عدم وجود است، نمیتوان رندر را برای حالت کنتراست بالا استایلبندی کرد.
- برخی از ترکیبهای صفحهخوان/مرورگر، از جمله NVDA و Firefox، محتویات پنجره پیشنهاد خودکار را اعلام نمیکنند.
مقادیر پیشنهادی در انواع متن، جستجو، آدرس اینترنتی، تلفن، ایمیل و شماره، هنگام کلیک یا دوبار کلیک کاربر روی کنترل، در یک منوی کشویی نمایش داده میشوند. معمولاً سمت راست یک کنترل نیز دارای یک فلش است که به وجود مقادیر از پیش تعریف شده اشاره میکند.
انواع month، week، date، time و datetime-local میتوانند رابطی را نشان دهند که امکان انتخاب راحت تاریخ و زمان را فراهم میکند. مقادیر از پیش تعریف شده را میتوان در آنجا نشان داد و به کاربر اجازه داد تا به سرعت مقدار کنترل را پر کند.
وقتی این نوعها پشتیبانی نمیشوند، یک نوع متن پایه به جای آن رندر میشود و یک فیلد متنی ایجاد میکند. آن فیلد مقادیر توصیه شده را به درستی تشخیص داده و آنها را در یک منوی کشویی به کاربر نمایش میدهد.
وقتی ویژگیهای مقداری در عناصر ارائه شده برای یک لیست داده مرتبط با یک نوع ورودی محدوده گنجانده میشوند، به صورت مجموعهای از علامتهای تیک نشان داده میشوند که کاربر میتواند به راحتی آنها را انتخاب کند.
ویژگی label برای ارائه برچسبهایی برای علامتهای تیک، همانطور که در استاندارد HTML تعریف شده است، در نظر گرفته شده است. با این حال، پشتیبانی مرورگرهای فعلی متفاوت است؛ برچسبها ممکن است به صورت بصری یا به عنوان راهنما نمایش داده نشوند.
نوع رنگ میتواند رنگهای از پیش تعریفشده را در رابط کاربری ارائه شده توسط مرورگر نشان دهد.
| مشخصه | توضیحات |
|---|
| دسته بندی محتوا | Flow content, phrasing content. |
| محتوای مجاز | یا محتوای جملهبندیشده یا صفر یا چند عنصر <option>. |
| حذف برچسب | هیچکدام، هر دو تگ شروع و پایان اجباری هستند. |
| والدین مجاز | هر عنصری که محتوای جملهبندیشده را بپذیرد. |
| نقش ضمنی ARIA | listbox |
| نقشهای مجاز ARIA | نقشی مجاز نیست |
| رابط DOM | HTMLDataListElement |
