هذا الدرس من الدورة التدريبية: كورس تعلم HTML من الصفر لبناء صفحات ويب
الدرس: تعلم كيفية استخدام Select و OptGroup لإضافة القوائم المنسدلة في صفحات الويب
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
كيفية إضافة قائمة منسدلة إلى صفحة الويب؟ لإضافة قائمة منسدلة (Dropdown) إلى صفحة الويب، يمكنك استخدام علامة
select مع علامة option لتحديد الخيارات المتاحة. يتم وضع علامة select كحاوية للخيارات، وتُستخدم علامة option لتمثيل كل خيار داخل القائمة المنسدلة. على سبيل المثال:<h1>اللغة الأم</h1>
<form action="" >
<select name="native-language" required>
<option value="">-- اختر الخيار --</option>
<option value="fr">الفرنسية</option>
<option value="it">الإيطالية</option>
</select>
<button>إرسال</button>
</form>
في هذا المثال، يمكن للمستخدم اختيار لغة معينة من القائمة المنسدلة.
كيفية إضافة قيمة خيار لإعلام المستخدمين بإمكانية الاختيار؟ لتوضيح للمستخدمين أنهم يمكنهم اختيار خيار معين من القائمة، يمكنك إضافة خيار افتراضي مثل:
<option value="">-- اختر الخيار --</option>
هذا الخيار لا يحتوي على قيمة محددة ويعمل فقط كإرشاد للمستخدم.
كيفية إضافة مجموعات من الخيارات داخل القائمة المنسدلة؟ يمكنك تنظيم الخيارات داخل القائمة المنسدلة باستخدام علامة
optgroup. تعمل هذه العلامة على تقسيم الخيارات إلى مجموعات معينة لتسهيل عملية الاختيار على المستخدم. على سبيل المثال:<select name="native-language" required>
<option value="">-- اختر الخيار --</option>
<optgroup label="مرتفع">
<option value="ar">العربية</option>
<option value="en">الإنجليزية</option>
</optgroup>
<optgroup label="منخفض">
<option value="fr">الفرنسية</option>
<option value="it">الإيطالية</option>
</optgroup>
</select>
في هذا المثال، تم تقسيم الخيارات إلى مجموعتين: "مرتفع" و"منخفض"، مما يسهل على المستخدم تحديد الخيار المناسب.
لماذا نستخدم OptGroup في تطوير الويب؟ استخدام
optgroup يسهم في تنظيم الخيارات داخل القوائم المنسدلة، خاصة عند وجود خيارات كثيرة. هذا التنظيم يحسن من تجربة المستخدم ويسهل عملية التفاعل مع الموقع.الخاتمة: إتقان كيفية إضافة القوائم المنسدلة وتنظيم الخيارات بداخلها يعزز من قدراتك في تطوير صفحات ويب متكاملة وسهلة الاستخدام. هذه الأدوات تعتبر جزءًا مهمًا في أي دورة تدريبية لتطوير الويب.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي تعلم كيفية استخدام Select و OptGroup لإضافة القوائم المنسدلة في صفحات الويب
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
الأوامر البرمجية المستخدمة لهذا الدرس
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
ملف الشرح المرجعي لنماذج إرسال البيانات في صفحة الإنترنت
- 337 دقيقة من الفيديوهات التفاعلية الحصرية
- 66 مصدر إضافي
- 52 ملحقات PDFs
- 14 فيديو إضافي داخل الدروس
- 28 تطبيق نظري وعملي
- الوصول على جميع الأجهزة
- وصول مدى الحياة
- شهادة أوروبية لإتمام الدراسة
- ا لحصول على شهادة دبلوم موثقة
للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج
دورة تدريبية تعلم لغة HTML لبناء مواقع الإنترنت
اضغط هنا ابدأ التعلم
أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج
الدروس والاختبارات لتعلم هذه الدورة التدريبية : كورس تعلم HTML من الصفر لبناء صفحات ويب
دورات تدريبية أخرى في برمجة
دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
تعلم كيفية استخدام CSS لتصميم صفحات ويب مميزة ومرنة. ستكتسب مهارات التحكم بالألوان، الأحجام، الخطوط، والمسافات لإنشاء تصاميم متجاوبة وجذابة، مما يجعل مواقعك متوافقة مع مختلف الشاشات والأجهزة
دورة تدريبية في فهم شبكات الإنترنت وخوادم الويب
دورة تدريبية تحتوي على دروس مجانية مدعمة من البورد الأوروبي لفهم أساسيات شبكة الإنترنت والاتصالات بين المستخدمين وتطبيقات الويب والأجهزة
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap يقام البرنامج بالتعاون وباعتماد الجهات التالية شهادة موثقة من الجهات الالمانية شهادة معتمدة...
مقالات ذات صلة
ماهي لغة PHP ولماذا نستخدمها وكيف نقوم بكتابتها
ماهي لغة PHP ولماذا نستخدمها وكيف نقوم بكتابتها؟ لغة PHP هي واحدة من أقوى لغات البرمجة المستخدمة في تطوير الصفحات الويب الديناميكية....
أساسيات لغة HTML لبناء صفحات ويب فعالة
تُعد متصفحات الويب (Web Browsers) واحدة من أهم الأدوات في عالم الإنترنت، حيث تُمكّن المستخدمين من تصفح مواقع الويب والوصول إلى المعلومات...
التعامل مع البيانات وواجهة المستخدم باستخدام JavaScript
هل تساءلت يومًا عن كيفية التحكم في البيانات والتفاعل مع واجهة المستخدم في صفحات الويب؟ 🤔 في عالم البرمجة الحديثة، يعد فهم...
