registration form

نموذج التسجيل عبر الإنترنت

هذا المشروع هو المشروع الثالث لدورة تطوير الواجهة الأمامية لفريق Team Treehouse.

في هذا المشروع ، ستقوم ببناء نموذج تسجيل مستجيب للهواتف المحمولة باستخدام مجموعة واسعة من أنواع وسمات نماذج HTML. باستخدام ملفات Mockup الموردة ، ستقوم بإنشاء إصدار محمول وسطح مكتب من النموذج باستخدام استعلامات الوسائط ، ونهج "الجوال أولاً".

يمكن العثور على رابط مباشر لهذا المشروع هنا

لقطة شاشة

تعليمات

1. قم ببناء التصميم باستخدام تصميم الجوال الأول :

• تأكد من أن ملف HTML يتضمن علامة Meta Viewport في رأس المستند ، راجع تكوين منفذ العرض لفهم السبب وكيفية إضافة هذه العلامة.
• انظر إلى Mockup (mobile-form.png) وأضف نفس المحتوى إلى ملف index.html الخاص بك.

2. قم بإنشاء بنية النموذج: فقط استخدم علامة <form> . يجب أن تحتوي العلامة <form> على جميع عناصر النموذج. أضف fieldset و legend لكل من الأقسام التالية:

• قسم "معلومات الاتصال" في الصفحة ، و
• قسم "النشرة الإخبارية" في الصفحة

3. تأكد من تضمين أنواع حقل النموذج التالية:

• إدخال النص
• إدخال البريد الإلكتروني
• مدخلات الهاتف
• حدد القائمة
• مربعات الاختيار
• أزرار الراديو
• Textarea
• زر إرسال

4. يجب أن تتضمن حقول النماذج السمات التالية:

• input : يجب أن تتضمن id ، type سمات name .
• select و textarea : يجب أن تتضمن سمات id name .

5. أضف ملصقات إلى كل عنصر نموذج باستخدام علامة HTML <label> . يجب أن يتطابق النص الموجود داخل الملصقات مع أسماء حقول النموذج في النماذج.

• تأكد من إقران كل عنصر <label> بشكل صحيح مع التحكم في النموذج المقابل عبر for . انظر الرابط أعلاه للحصول على مثال. ولا تنسى عنصر Textarea. الذي يحتاج إلى تسمية يعمل أيضا.

6. استخدم سمة placeholder الإدخال لإضافة النص "المطلوب" إلى:

• حقل الاسم الكامل
• حقل عنوان البريد الإلكتروني

7. بمجرد أن يكون لديك كل شيء في مكانه لتخطيط الهاتف المحمول ، استخدم استعلامًا للوسائط لإضافة نقطة توقف لضبط التصميم لشاشات الكمبيوتر اللوحي وسطح المكتب الأوسع.

• تطابق التصميم كما يجب أن ينظر إلى جهاز لوحي أو سطح مكتب يبلغ عرضه 768 بكسل باستخدام نموذج سطح المكتب.
• استخدم نهجًا للهاتف المحمول من خلال كتابة استفسارات الوسائط الخاصة بك باستخدام خاصية min-width في CSS.

8. بمجرد أن تكون جميع نقاط التوقف الخاصة بك في مكانها الصحيح ، تحقق مزدوجًا يتطابق تخطيطك على كلا من النماذج.

• تحقق
  • الهاتف المحمول : يجب أن يكون النص أعلى حقل النموذج.
  • سطح المكتب : يجب أن يكون النص على الجانب الأيسر من حقل النموذج.

9. استخدم خط Google للنص

10. إضافة :focus UTALES إلى النموذج عندما ينقر المستخدم أو علامات التبويب في حقل نص.

11. تأكد من التحقق من الرمز الخاص بك عن طريق تشغيله من خلال مدقق HTML و CSS.

• يمكن العثور على روابط للمقدين في موارد المشروع. سيساعدك ذلك على اكتشاف أي أخطاء قد تكون في الكود الخاص بك.
• هناك بعض الاستثناءات التي لا تحتاج إلى إصلاحها:
  • لا تقلق بشأن أي تحذيرات ، نحتاجك فقط إلى التحقق من أي أخطاء قد تكون هناك.
  • إذا كانت أعلام مصادقة CSS استخدام CALC ، أو بادئات البائع أو العناصر الزائفة/الفئات الزائفة يجب تجاهل هذه الأخطاء.
  • إذا كانت أعلام مصادقة HTML استخدام الأنابيب ('|') في روابط FONT Google/url ، يمكن أيضًا تجاهل هذا الخطأ.