هذا الدرس من الدورة التدريبية: كورس تعلم HTML من الصفر لبناء صفحات ويب
الدرس: استخدام أنواع المدخلات range و color و hidden في HTML: الخصائص والتطبيقات
المدة: 6 دقائق
وصف مختصر:
وصف الدرس
تعتبر عناصر الإدخال (input) في HTML أساسية في تصميم النماذج وجمع البيانات من المستخدمين. في هذا المقال، سنستعرض ثلاثة أنواع من المدخلات:
range و color و hidden، وسنشرح خصائصها واستخداماتها العملية.1. عنصر input type="range":
يتيح لك عنصر
input type="range" إنشاء شريط تمرير يمكن للمستخدمين من خلاله تحديد قيمة ضمن نطاق معين. يوفر هذا النوع من الإدخال واجهة تفاعلية لاختيار القيم.الخصائص:
- min: يحدد أدنى قيمة يمكن اختيارها.
- max: يحدد أعلى قيمة يمكن اختيارها.
- value: يحدد القيمة الافتراضية.
- step: يحدد الزيادة بين القيم القابلة للاختيار.
مثال على استخدام
input type="range":<form action="">
<input type="range" id="volume" name="volume" min="0" max="11" />
</form>
2. عنصر input type="color":
يوفر عنصر
input type="color" للمستخدمين طريقة لاختيار الألوان من خلال واجهة رسومية. يمكن تعيين اللون باستخدام رمز اللون السداسي (hex color code).ما هو رمز اللون السداسي؟ رمز اللون السداسي هو طريقة لتمثيل الألوان في الويب باستخدام 6 أرقام وحروف. على سبيل المثال،
#e66465 هو رمز اللون السداسي للون الأحمر الفاتح.كيفية اختيار الألوان باستخدام ColorZilla: يمكنك استخدام إضافة ColorZilla لمتصفحات الويب لاختيار الألوان من أي عنصر على الصفحة. تساعد هذه الإضافة في الحصول على رموز ألوان دقيقة لدمجها في تصميماتك.
مثال على استخدام
input type="color":<form action="">
<input type="color" id="head" name="head" value="#e66465" />
</form>
3. عنصر input type="hidden":
يستخدم عنصر
input type="hidden" لتخزين القيم التي لا تحتاج إلى عرضها للمستخدم، ولكن يمكن استخدامها في الخلفية في النموذج أو الصفحة.أهمية استخدام
input type="hidden":- تخزين المعلومات: يمكن استخدامه لتخزين معلومات ضرورية مثل معرّفات النشر أو بيانات إضافية دون الحاجة لعرضها للمستخدم.
- إدارة البيانات: يساعد في إدارة البيانات المرسلة من النموذج دون تعديل محتوى واجهة المستخدم.
مثال على استخدام
input type="hidden":<form action="">
<input type="hidden" id="postId" name="postId" value="34657" />
</form>
كيفية استخدام القيم المخفية:
يمكنك استخدام القيم المخفية لإرسال بيانات غير مرئية ولكنها ضرورية لمعالجة النماذج أو تنفيذ الإجراءات على الخادم.
أهمية البحث والتعلم المستمر:
عند استخدام أنواع المدخلات المختلفة، من الضروري البحث والتعلم للحصول على أحدث المعلومات والميزات المتاحة. يعتبر البحث عن الممارسات الجيدة واستخدام الأدوات الحديثة خطوة مهمة في تحسين تصميم النماذج وتجربة المستخدم.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي استخدام أنواع المدخلات range و color و hidden في HTML: الخصائص والتطبيقات
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
الأوامر البرمجية المستخدمة
ملحقات ال PDF
- 337 دقيقة من الفيديوهات التفاعلية الحصرية
- 66 مصدر إضافي
- 52 ملحقات PDFs
- 14 فيديو إضافي داخل الدروس
- 28 تطبيق نظري وعملي
- الوصول على جميع الأجهزة
- وصول مدى الحياة
- شهادة أوروبية لإتمام الدراسة
- ا لحصول على شهادة دبلوم موثقة
للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج
دورة تدريبية تعلم لغة HTML لبناء مواقع الإنترنت
اضغط هنا ابدأ التعلم
أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج
الدروس والاختبارات لتعلم هذه الدورة التدريبية : كورس تعلم HTML من الصفر لبناء صفحات ويب
دورات تدريبية أخرى في برمجة
دبلوم بناء مواقع الإنترنت للمبتدئين تعلم من الصفر HTML وCSS وJavaScript
ابدأ رحلتك في تطوير مواقع الإنترنت مع دبلوم شامل للمبتدئين. تعلم HTML وCSS وJavaScript من الصفر واكتسب المهارات الأساسية لبناء مواقع احترافية. دورة مصممة لتدعمك في كل خطوة على الطريق.
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap يقام البرنامج بالتعاون وباعتماد الجهات التالية شهادة موثقة من الجهات الالمانية شهادة معتمدة...
تعلم البرمجة من الصفر وتطوير صفحات الويب الإحترافية مع لغة جافاسكربت JavaScript
تعلم البرمجة من الصفر وبدون خبرة حتى احتراف صناعة تطبيقات الويب التفاعلية باستخدام لغة العصر جافاسكربت JavaScript
مقالات ذات صلة
استكشاف الأساليب المتقدمة للمصفوفات في جافاسكريبت
المصفوفات (Arrays) في جافاسكريبت: دليل شامل مقدمة المصفوفات هي واحدة من أهم هياكل البيانات الأساسية في جافاسكريبت، حيث تتيح للمطورين تخزين وإدارة...
التحكم في صفحة الويب باستخدام JavaScript: دليل شامل
التحكم في صفحة الويب باستخدام JavaScript: دليل شامل يعد التحكم في صفحة الويب باستخدام JavaScript من الجوانب الأساسية التي تمكن المطورين من...
لماذا يجب أن تبدأ بتعلم البرمجة وجافاسكربت الآن؟
فوائد تعلم البرمجة وبرنامج جافاسكربت في عالمنا الرقمي المتسارع، أصبحت البرمجة حجر الزاوية الذي تقوم عليه العديد من الابتكارات التقنية التي نشهدها...
