جاري التحميل...
Datalist في HTML
الدرس السابق select اختيار مغلق من قائمة ثابتة. datalist مهمة أخرى: تكتب في input عادي والمتصفح يقترح. يمكن أخذ اقتراح أو كتابة شيء غير مدرج.
لماذا يوجد datalist
البحث واللون والمدينة تحتاج إجابات شائعة دون منع النادر. select يرفض خارج القائمة؛ input بلا تلميح. datalist يملأ الفجوة: اقتراحات مع نص حر. option للاقتراح؛ list يشير إلى القائمة.
إجابة مباشرة
1) datalist مع option value. 2) list على input يطابق id. 3) label وname على input — datalist لا يُرسل. 4) اقتراح أو نص مخصص مسموحان. 5) استخدم select عندما يجب أن تكون القيمة من القائمة فقط.
📊 Datalist pieces beginners use
| Piece | Role | Beginner tip |
|---|---|---|
| datalist | Suggestion container | Hidden list of hints; not a visible form control alone |
| option (inside datalist) | One suggestion | Prefer value= for the hinted string |
| list (on input) | Points to datalist | Must equal the datalist’s id |
| id (on datalist) | Hook for list= | Unique on the page |
| input | Typed field that submits | Owns name=; suggestions are optional help |
| label | Accessible name | Still required — list suggestions are not a label |
| name (on input) | Submit key | What posts is whatever is in the input |
مثال اقتراحات المتصفح
حقل Browser مع Firefox إلى Safari. كتابة Brave تعمل — القائمة لا تقفلها.
<label for="browser">Browser</label>
<input id="browser" name="browser" list="browsers" placeholder="Type or choose">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Edge">
<option value="Safari">
</datalist>
قراءة مثال المتصفح
- عنصر الإرسال هو input لا datalist
- list يجب أن يطابق id
- كل option value اقتراح
- name مفتاح قيمة الـ input
- label يسمي الحقل
- بخلاف select لست مقيداً بالأسماء الأربعة
اقتراحات مدينة مع datalist
مقتطف ثانٍ لمدينة الشحن: اقتراحات مع إمكانية كتابة قرية. قارن مع select المغلق السابق.
<form action="/ship" method="post">
<label for="city">City</label>
<input id="city" name="city" list="cities" placeholder="Start typing a city" autocomplete="off">
<datalist id="cities">
<option value="Tehran">
<option value="Isfahan">
<option value="Shiraz">
</datalist>
<button type="submit">Continue</button>
</form>
قراءة مثال المدينة
- نفس نمط label وname
- ربط list/id يوصل التلميحات
- القيمة المرسلة نص الـ input
- autocomplete=off اختياري
- التالي: accessibility أوسع
اختيار datalist مقابل select وinput
- يجب من مجموعة ثابتة: select
- تلميحات مع نص حر: input + list + datalist
- بلا اقتراح: input عادي
- datalist لا يستبدل label أو name
- لا تضع datalist داخل input؛ اربط بـ id
تمرين — ربط الاقتراحات
- أضف Opera خامساً
- اكسر تطابق id ثم أصلحه
- اكتب اسماً مخصصاً خارج القائمة
- أضف Mashhad للمدن
- أعد المدن كـ select واكتب جملة الفرق
- جملة: datalist يقترح؛ select يقيّد
- التسمية الأوسع في accessibility التالي
أخطاء شائعة
- عدم تطابق list وid
- توقع رفض الكتابة الحرة
- نسيان label
- نسيان name على input
- وضع name على datalist
- option فارغ بلا value
- نموذج select فقط على حقل حر
ملخص
- datalist + option value = اقتراحات لـ input
- ربط list وid
- الكتابة خارج القائمة مسموحة
- label وname على input
- استخدم select للاختيار المغلق
- التالي: accessibility
🧠 اختبر معرفتك
جاهز للبدء
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
5
الأسئلة
70%
للنجاح
∞
الوقت
∞
المحاولات
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى