وسم قائمة الاقتراحات <datalist>

وسم datalist يضيف اقتراحات تلقائية لحقل input — المستخدم يكتب بحرية وتظهر له خيارات جاهزة تُصفّى مع الكتابة.

الهجين الذكي بين حرية input وخيارات select: حقل كتابة حر تظهر تحته قائمة اقتراحات تتصفى مع كل حرف، والمستخدم يختار منها أو يكمل كتابة قيمة جديدة كليًّا. الربط بسيط: id على datalist وlist بنفس القيمة على input.

مثالي لحقول «الغالب معروف والاستثناء وارد»: المدينة، التخصص، لغة البرمجة المفضلة.

الصياغة

<input list="cities" name="city">
<datalist id="cities">
  <option value="عمّان">
  <option value="إربد">
</datalist>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<label>لغتك المفضلة (اكتب أو اختر):</label><br>
<input list="langs" style="padding:8px; border-radius:8px; border:1px solid #ccc; width:220px" placeholder="ابدأ الكتابة...">
<datalist id="langs">
  <option value="JavaScript">
  <option value="Python">
  <option value="Java">
  <option value="PHP">
</datalist>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
id	معرف القائمة — يربطها input عبر list بنفس القيمة

💡 نصائح عملية

الفيصل بينه وبين select: هل القيم الحرة خارج القائمة مقبولة؟
يعمل مع أنواع input أخرى أيضًا: color وrange وdate باقتراحات

⚠️ أخطاء شائعة

نسيان مطابقة list بالـ id فلا تظهر الاقتراحات إطلاقًا
الاعتماد عليه للتحقق — المستخدم يستطيع كتابة أي شيء؛ تحقق في الخادم

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs