إعلان
تعلم الآن

HTML الوسم <datalist>

تعريفه

نستخدم الوسم <datalist> لعرض خيارات مجهزة مسبقاً تظهر أمام المستخدم حين يقوم بإدخال قيمة في مربع النص.
المميز في هذه القائمة أنها نسبةً للأحرف التي يدخلها المستخدم تعرض له الخيارات التي تبدأ بنفس الأحرف.

بشكل عام, نستخدم الوسم <datalist> على النحو التالي لتجهيز قائمة خيارات مساعدة لمربع النص.

<!-- مربع النص -->
<input="list-id">

<!-- قائمة الخيارات المربوط بها -->
<dataid="list-id">
    <option value="val-1">
    <option value="val-2">
	...
</datalist>
	

  • الوسم <datalist> نضيف الخاصية id له لأنه من خلالها سنتمكن من ربط أي مربع النص به.
  • أي وسم <input> نريد ربطه به نقوم بإضافة الخاصية list له و تمرير id الوسم <datalist> لها كقيمة.
  • أي خيار نريد وضعه في القائمة التي يمثلها الوسم <datalist> نضعه كوسم <option>.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <datalist>.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
20 12 4 9.5 12.1 4.4.3 33 4 غير مدعوم 12.2 2.0

خصائصه

الخاصية open

يمكن إضافتها له لجعل المحتوى الذي يمكن إخفائه فيه ظاهراً بشكل إفتراضي.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
مدعوم 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

إستخدامه

في المثال التالي قمنا بإضافة مربع نص مربوط بقائمة خيارات مساعدة تتضمن 6 قيم مجهزة مسبقاً.

مثال

<input="browsers">
<dataid="browsers">
	<option value="Chrome">
	<option value="Firefox">
	<option value="Internet Explorer">
	<option value="Opera">
	<option value="Safari">
	<option value="Microsoft Edge">
</datalist>
		

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

data{
	display: none;
}
	

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة