<datalist>: عنصر DATALIST
آخر تحديث: 2026-10-13
<datalist>عنصر DATALIST
يقدم قائمة بالقيم المقترحة لإدخال (مع تلميح قائمة منسدلة) مع السماح بالكتابة الحرة؛ اقرنه بخاصية list في input.
| الفئة | النماذج |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </datalist> وسم |
| الحالة | قياسي |
📝 البنية
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <datalist> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： datalist غير مرئي في حد ذاته؛ يُشار إليه عبر list في input؛ ويختلف تنسيق التلميح حسب المتصفح.
❓ الأسئلة الشائعة
Qما الفرق بين datalist و select؟
A
<datalist> مع <input list> يقدمان «إدخال حر + اقتراحات للاختيار»: يكتب المستخدم ما يشاء أو يختار من القائمة؛ بينما <select> لا يسمح إلا بالاختيار من خيارات ثابتة. فالقيمة الثابتة الإلزامية select، والإدخال الحر datalist.Qكيف تربط datalist بـ input؟
Aأعطِ datalist معرّف
id وسمِد input سمة list بالاسم نفسه: <input list='cities'><datalist id='cities'>…</datalist>. ويمكن لـ datalist واحد خدمة عدة inputs، والعكس لا — فكل input لا يرتبط إلا بـ datalist واحد في كل مرة.Qهل لمتوافقة datalist مشاكل؟
Aكل المتصفحات الحديثة تدعمه، لكن أنماط التفاعل تتفاوت كثيرًا: Chrome يعرض سهمًا منسدلًا وSafari يعرض طبقة اقتراحات. ولا يمكن تخصيص تنسيق الاقتراحات — فاقبل هذه القيود مسبقًا أو انتقل إلى مكوّن إكمال تلقائي بـ JS.
🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
