شرح العنصر (datalist) في HTML

HTML

يحتوي العنصر <datalist> على مجموعة من <option> العناصر التي تُمثل خيارات مُحددة مُسبقًا لعناصر إدخال أخرى. يُمكنك استخدامه مع <input> العنصر الذي list تُشير سمته إلى <datalist> العنصر.

إنها طريقة رائعة لمنح المستخدمين خيارات لإدخال بيانات النموذج، مع منحهم بديلاً لإدخال نص مجاني، على عكس <select> العنصر الأكثر تقييدًا.

مقدمة إلى عنصر <datalist>

عنصر <datalist> هو أحد العناصر القوية في HTML5 الذي يوفر وظيفة "الإكمال التلقائي" الذكي لحقول الإدخال. يسمح للمطورين بتقديم قائمة من الخيارات المقترحة للمستخدمين أثناء كتابتهم في حقل إدخال، مما يحسن تجربة المستخدم ويقلل من الأخطاء في إدخال البيانات.

تاريخ العنصر والتطور

• HTML5 (2014): تم تقديم <datalist> لأول مرة
• 2016: تحسين دعم المتصفحات للعنصر
• 2020: أصبح مدعومًا بشكل كامل في جميع المتصفحات الحديثة

التركيب الأساسي للعنصر

<label for="browser">اختر متصفحك المفضل:</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

كيف يعمل <datalist>

1. الربط مع حقول الإدخال: يتم ربط عنصر <datalist> مع <input> باستخدام السمة list
2. عرض الاقتراحات: عند بدء الكتابة في حقل الإدخال، تظهر قائمة منسدلة بالخيارات المطابقة
3. الاختيار المرن: يمكن للمستخدم إما اختيار أحد الخيارات المقترحة أو إدخال قيمة مخصصة

الفرق بين <datalist> و <select>

الميزة	<datalist>	<select>
الاختيار الحر	نعم، يمكن إدخال قيم مخصصة	لا، يجب اختيار من القائمة
الفلترة	تلقائية أثناء الكتابة	غير متاحة
القيم المسبقة	قيم مقترحة فقط	قيم محددة يجب اختيارها
التعددية	تدعم الإدخال الواحد	تدعم select multiple

هل تعلم؟

• تم تقديم العنصر <datalist> في HTML5 لتوفير خيارات الإكمال التلقائي لإدخالات النص.
• يمكن لعناصر الإدخال المتعددة في نفس الصفحة استخدام <option> العناصر الموجودة داخل عنصر واحد <datalist>.
• عندما يقوم المستخدم بكتابة <input> عنصر باستخدام سمة القائمة التي تشير إلى <datalist> عنصر، سيعرض المتصفح قائمة منسدلة من الخيارات من <datalist> العنصر الذي يتطابق مع النص المدخل حتى الآن.

الخلاصـــة

عنصر<datalist> هو أداة قوية لتحسين تجربة المستخدم في نماذج الويب، حيث يوفر:

• واجهة مستخدم بديهية وسهلة الاستخدام
• تقليل أخطاء الإدخال
• تحسين كفاءة ملء النماذج
• دعم للقيم المخصصة بالإضافة إلى الخيارات المحددة

باستخدام <datalist> بشكل صحيح، يمكنك إنشاء تطبيقات ويب أكثر تفاعلية وسهولة في الاستخدام.

كيف كان المقال؟