تقسّم هذه الدورة نماذج HTML إلى أجزاء يسهل فهمها. في الوحدات القليلة التالية، ستتعرف على طريقة عمل نموذج HTML وكيفية استخدامه بفعالية في مشروعاتك. استخدِم جزء القائمة إلى جانب شعار التعرّف على النماذج للتنقّل في الوحدات.
ستتعرف على كيفية إنشاء نموذج HTML أساسي، وعن عناصر HTML، وكيفية تصميم النماذج، ومساعدة المستخدمين على إعادة إدخال البيانات، وضمان إمكانية الوصول إلى النموذج، وتأمينه، وكيفية اختبار النماذج، وحول أنواع محددة من النماذج.
كل وحدة مليئة بعروض توضيحية تفاعلية وتقييمات ذاتية لاختبار معلوماتك.
هذه الدورة مناسبة لمطوّري برامج HTML المبتدئين والمتقدمين. تساعدك الوحدات القليلة الأولى في البدء بإنشاء نماذج HTML، بينما تقدّم الوحدات الأخرى مزيدًا من التفاصيل. يمكنك استعراض السلسلة من البداية إلى النهاية للحصول على فهم عام لنماذج HTML، أو اختيار وحدة معينة تريد معرفة المزيد عنها.
المتطلبات الأساسية
قبل بدء هذه الدورة، يجب أن تتعرف على HTML. بالنسبة إلى المبتدئين في مجال تطوير الويب، اطّلِع على دورة HTML التدريبية من MDN للتعرّف على كيفية كتابة الترميز.
إصدارات تجريبية
بالنسبة إلى معظم الإصدارات التجريبية، نستخدم CodePen.
وبالنظر إلى العروض التوضيحية، قد تتساءل من أين تأتي الأنماط. نستخدم ورقة أنماط عامة مضمّنة في جميع الإصدارات التجريبية، لذلك لا تظهر سوى الأنماط ذات الصلة فقط. في CodePen، يمكنك اختيار ملفات CSS المضمّنة من "الإعدادات".
عناصر التحكم في النموذج وحقول النموذج
عنصر التحكّم في النموذج هو عنصر يتيح تفاعل المستخدم وإدخال البيانات أو اختيارها: <input> أو <select> أو <textarea> أو <button>.
يتم أحيانًا استخدام حقل النموذج للإشارة إلى عناصر التحكم في النموذج،
بالأخص عناصر لإدخال النص: <input> و<textarea>.
ستتعرف على ما يلي:
استخدام النماذج للحصول على بيانات من المستخدمين
تعرَّف على أساسيات استخدام نموذج على الويب من خلال هذه المقدمة حول عنصر النموذج.
مساعدة المستخدمين في إدخال البيانات في النماذج
نظرة عامة على عناصر النموذج المختلفة التي يمكنك الاختيار من بينها لإنشاء النموذج.
مساعدة المستخدمين على تجنُّب إعادة إدخال البيانات في النماذج
تسهيل ملء النماذج على المستخدمين
مساعدة المستخدمين في إدخال البيانات الصحيحة في النماذج
تعرَّف على كيفية التحقّق من صحة النماذج في الواجهة الأمامية.
اختبار نماذجك
تعرَّف على كيفية اختبار النماذج وتحليلها.
أساسيات التصميم
تعرّف على كيفية إنشاء نماذج سهلة الاستخدام.
تسهيل الاستخدام
كيفية إنشاء نماذج شاملة.
التدويل والأقلمة
استعِد لتنسيقات البيانات العالمية وتعرَّف على كيفية التخطيط للأقلمة.
الأمان والخصوصية
تعرَّف على كيفية تأمين نماذجك والحفاظ على خصوصية بيانات المستخدمين.
الملء التلقائي
تعرَّف على كل المعلومات حول ميزة الملء التلقائي وسمة الإكمال التلقائي.
كيفية اختبار النماذج للتأكّد من سهولة استخدامها
اكتشف كيفية إجراء اختبار قابلية الاستخدام والتأكد من أن النموذج يعمل بشكل جيد لجميع المستخدمين.
اختبار النماذج على جميع الأجهزة والمنصات
تأكَّد من أنّ النموذج يعمل على مختلف الأجهزة والمتصفّحات والأنظمة الأساسية والسياقات المختلفة.
جمع البيانات
تعرَّف على كيفية قياس نموذجك وتحليله.
تفاصيل عنصر النموذج
تعرَّف على كل المعلومات حول عنصر النموذج ومتى يجب استخدامه وكيفية عمله بالتفصيل.
معلومات تفصيلية عن حقول النموذج
تعرَّف على معلومات حول حقول النموذج المختلفة التي يمكنك استخدامها وكيفية اختيار عنصر النموذج المناسب.
تفاصيل حول سمات النموذج
تعرَّف على كل ما يخصّ سمات النموذج: كيفية تعديل تصميم لوحات المفاتيح على الشاشة، وتفعيل ميزة التحقّق من الصحة المضمَّنة، والمزيد.
نماذج التصميم
أنماط النماذج باستخدام CSS، مع التأكد من أنها تظل قابلة للاستخدام وقابلة للقراءة للجميع.
عناصر التحكّم في نموذج التصميم
التعرّف على كيفية تنفيذ عناصر التحكّم في النموذج باستخدام لغة CSS
JavaScript
تعرف على كيفية استخدام JavaScript لتحسين نماذجك.
نماذج الدفع
حسِّن معدلات الإحالات الناجحة من خلال إنشاء طرق دفع أفضل.
نماذج العناوين
مساعدة المستخدمين على ملء نماذج العناوين بسرعة وسهولة
الخاتمة والخطوات التالية
موارد إضافية لمساعدتك في اتخاذ خطواتك التالية.
إذًا، هل أنت مستعد للتعرف على النماذج؟ لنبدأ.