HTMLالوسم <datalist>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
تعريفه
نستخدم الوسم <datalist> لعرض خيارات مجهزة مسبقاً تظهر أمام المستخدم حين يقوم بإدخال قيمة في مربع النص.
المميز في هذه القائمة أنها نسبةً للأحرف التي يدخلها المستخدم تعرض له الخيارات التي تبدأ بنفس الأحرف.
بشكل عام, نستخدم الوسم <datalist> على النحو التالي لتجهيز قائمة خيارات مساعدة لمربع النص.
<!-- مربع النص -->
<input="list-id">
<!-- قائمة الخيارات المربوط بها -->
<dataid="list-id">
<option value="val-1">
<option value="val-2">
...
</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>
<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;
}
data{
display: none;
}
