هذا الدرس من الدورة التدريبية: كورس تعلم HTML من الصفر لبناء صفحات ويب
الدرس: تعلم كيفية البحث في القوائم المنسدلة Datalist و Fieldset لإظهار تصميم مع الحقول
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
datalist و fieldset. سيساعدك فهم كيفية استخدامهما في تحسين قابلية الاستخدام (UX) وتصميم واجهات المستخدم.ما هو Datalist؟ الداتاليست (
datalist) هو قائمة قابلة للبحث تمكن المستخدمين من العثور على القيم المحددة بسهولة. يتم استخدامه مع علامة input لتوفير تجربة بحث أكثر تفاعلية. المثال التالي يوضح كيفية استخدامه:<h1>اللغة الأم</h1>
<form action="" >
<label for="browser">اختر متصفحك من القائمة:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<button>إرسال</button>
</form>
في هذا المثال، يمكن للمستخدمين إدخال النص في حقل الإدخال والبحث عن الخيارات المتاحة في القائمة.
لماذا قد لا يعمل Datalist؟ عند استخدام
datalist، يجب التأكد من أن حقل الإدخال (input) يحتوي على معرف (id) يتطابق مع قيمة خاصية list في علامة datalist. إذا لم يتم تحقيق هذا الشرط، فلن يعمل datalist بشكل صحيح.كيفية إضافة قائمة قابلة للبحث في صفحة الويب؟ يمكنك إضافة قائمة قابلة للبحث باستخدام
datalist مع input كما في المثال السابق. هذا يوفر للمستخدمين القدرة على البحث عن الخيارات المتاحة بسهولة.لماذا لا يتم استخدام Datalist بشكل واسع في المشاريع الحقيقية؟ على الرغم من أن
datalist مفيد في بعض الحالات، إلا أن تحسين تجربة المستخدم يتطلب أحيانًا استخدام حلول أكثر تقدمًا مثل HTML و CSS و JavaScript أو استخدام مكتبات مثل jQuery أو React. هذه الحلول توفر تحكمًا أكبر في واجهة المستخدم ووظائفها.ما هو Fieldset؟
fieldset هو عنصر HTML يستخدم لتجميع الحقول ذات الصلة معًا داخل نموذج. يتميز بإضافة إطار حول المجموعة وتوفير تنسيق منظم. المثال التالي يوضح كيفية استخدام fieldset:<h1>اللغة الأم</h1>
<form action="" >
<fieldset>
<legend>المعلومات الشخصية:</legend>
<label for="fname">الاسم الأول:</label>
<input type="text" id="fname" name="fname"><br><br>
<button>إرسال</button>
</fieldset>
</form>
في هذا المثال، يعمل
fieldset على تنظيم الحقول داخل النموذج ويضيف إطارًا بصريًا حولها.كيفية إزالة الإطار حول عناصر HTML؟ لإزالة الإطار حول عناصر HTML، يمكنك استخدام علامة
fieldset دون الحاجة إلى كتابة CSS إضافي.كيف يمكن استخدام Fieldset في تصميم واجهات المستخدم؟ يساعد
fieldset في تحسين تصميم واجهات المستخدم عن طريق تجميع الحقول المرتبطة معًا وتوفير تنسيق مرتب ومنظم.كلمة عن الدرس:
معرفة كيفية استخدام
datalist و fieldset يضيف لمسة احترافية لتصميماتك في صفحات الويب. هذه العناصر تساعد في تحسين تجربة المستخدم وتنظيم المحتوى بطريقة بصرية وفعالة.الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي تعلم كيفية البحث في القوائم المنسدلة Datalist و Fieldset لإظهار تصميم مع الحقول
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
الأوامر البرمجية المستخدمة datalist
الأوامر البرمجية المستخدمة fieldset
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
ملف الشرح المرجعي لنماذج إرسال البيانات في صفحة الإنترنت
- 337 دقيقة من الفيديوهات التفاعلية الحصرية
- 66 مصدر إضافي
- 52 ملحقات PDFs
- 14 فيديو إضافي داخل الدروس
- 28 تطبيق نظري وعملي
- الوصول على جميع الأجهزة
- وصول مدى الحياة
- شهادة أوروبية لإتمام الدراسة
- ا لحصول على شهادة دبلوم موثقة
للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج
دورة تدريبية تعلم لغة HTML لبناء مواقع الإنترنت
اضغط هنا ابدأ التعلم
أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج
الدروس والاختبارات لتعلم هذه الدورة التدريبية : كورس تعلم HTML من الصفر لبناء صفحات ويب
دورات تدريبية أخرى في برمجة
دورة تدريبية في فهم شبكات الإنترنت وخوادم الويب
دورة تدريبية تحتوي على دروس مجانية مدعمة من البورد الأوروبي لفهم أساسيات شبكة الإنترنت والاتصالات بين المستخدمين وتطبيقات الويب والأجهزة
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap يقام البرنامج بالتعاون وباعتماد الجهات التالية شهادة موثقة من الجهات الالمانية شهادة معتمدة...
مقالات ذات صلة
التعامل مع البيانات وواجهة المستخدم باستخدام JavaScript
هل تساءلت يومًا عن كيفية التحكم في البيانات والتفاعل مع واجهة المستخدم في صفحات الويب؟ 🤔 في عالم البرمجة الحديثة، يعد فهم...
استكشاف الأساليب المتقدمة للمصفوفات في جافاسكريبت
المصفوفات (Arrays) في جافاسكريبت: دليل شامل مقدمة المصفوفات هي واحدة من أهم هياكل البيانات الأساسية في جافاسكريبت، حيث تتيح للمطورين تخزين وإدارة...
التحكم في صفحة الويب باستخدام JavaScript: دليل شامل
التحكم في صفحة الويب باستخدام JavaScript: دليل شامل يعد التحكم في صفحة الويب باستخدام JavaScript من الجوانب الأساسية التي تمكن المطورين من...
