انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #6 من درس: الخصائص المتقدمة لعنصر Input مع HTML Form

List Attribute and Datalist Connection خاصية List والربط مع الاقتراحات

استكشف الخصائص المتقدمة لحقول إدخال HTML: التحقق بالأنماط عبر pattern وإرشادات title والخيارات المتعددة وتدرج step واقتراحات datalist وخصائص تجاوز النموذج.
3 صفوف تعليمية
لغة HTML
4,237 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
تربط خاصية list حقل الإدخال بعنصر datalist الذي يضم قائمة اقتراحات معدة مسبقاً للتعبئة التلقائية. وعلى خلاف قوائم الاختيار select التي تقيد المستخدم بخيارات مغلقة، يمنح الاقتران بعنصر datalist اقتراحات إرشادية مرنة مع الحفاظ على حرية كتابة أي نص مخصص.
الصف 2 كود برمجي
HTML 
<label for="browserChoice">Browser</label>
<input type="text" id="browserChoice" list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>
جرّب بنفسك
الصف 3 ملاحظة هامة

جميع فقرات هذا الدرس (الخصائص المتقدمة لعنصر Input مع HTML Form)