تكليفات الدروس من [ 24 ] إلى [ 34 ]
[ 8 ] تكليفات على [ Form ]
التكليف 01
- قم بإنشاء نموذج يحتوي على خمس حقول إدخال
- كل حقل يجب أن يحتوي على Label قبله
- الحقول هي Username, Password, Mobile, Email, Subject
- تأكد من إختيار نوع الحقل المناسب لكل مما سبق
- حقل ال Mobile يمكن أن يحتوي على رقم بهذا الشكل +20100 (234) 123
- حقل ال Username + Email إجباري كتابته
- جميع الحقول يجب أن تحتوي على نص يوجه الشخص لنصائح أثناء ملأ الحقل. يمكنك كتابة ما تريد في النصائح
- يجب أن يكون ال Label على سطر وحقل الإدخال على سطر آخر تحته
- كل Label + Input يجب وضع hr بعدهم للفصل بينهم وبين ال Label + Input الموجودين بعدهم
- البيانات الموجودة في النموذج سوف يتم إرسالها لصفحة اسمها test.py
- يجب التأكد ان البيانات التي يتم إرسالها لن تظهر في الرابط العلوي
- قم بإلتقاط صورة من ال Query String التي تحتوي على البيانات
- يجب عليك وضع حقل مخفي تكون قيمته أي رقم تريده
- يجب وضع زر يقوم بحذف جميع ما تم كتابته في حقول الإدخال ويكون إسمه Empty Form
- يجب وضع زر لإرسال البيانات يكون إسمه Send Data
التكليف 02
- قم بعمل الشكل الموجود في الصورة بال HTML فقط
- القيمة الإفتراضية هي 400
- لا تحتاج لعمل الأرقام هي فقط لتوضيح المطلوب
التكليف 03
- قم بإنشاء نموذج يحتوي على ثلاث حقول إدخال
- كل حقل يجب أن يحتوي على Label قبله
- الحقول هي Token, Email, Username
- تأكد أن حقل ال Token حقل مخفي ويحتوي على القيمة التالية b92f1fc2fce391ad7af633723afd3055
- تأكد أن حقل ال Email لا يمكن التعديل عليه ويكون به القيمة التالية [email protected]
- عند فتح الصفحة تأكد أن مؤشر الكتابة مركز عند الحقل Username
- تأكد من أن حقل Username يقبل إسم مستخدم من 5 حروف إلى 20 حرف فقط ويكون إجباري
- قم بعمل زر يقوم بإفراغ محتوى البيانات التي كتبها المستخدم ويكون إسمه Empty
- قم بعمل زر لإرسال البيانات بإسم Send
- يتم إرسال البيانات لنفس الصفحة
- يجب أن تظهر البيانات التي تم إرسالها في الرابط بنفس الشكل الموجود في الصورة التالية
التكليف 04
- قم بإضافة ما يلي للنموذج السابق
- قائمة من الإختيارات Check تخص مهارات برمجية يمكن أن يختار الشخص منها أكثر من مهارة
- على سبيل المثال Problem Solving, Logical Thinking, Advanced Search, Analysis, Planning
- يجب أن يكون ال Label مرتبط بالإختيار بمعنى عند الضغط على ال Label يتم تفعيل الإختيار
- قم بإنشاء قائمة أخرى من الإختيارات تخص وظيفة الشخص ويجب إختيار خيار واحد فقط منها
- على سبيل المثال Front-End Developer, Back-End Developer, Business Analyst, Project Manager, Scrum Master
- يجب أن يكون ال Label مرتبط بالإختيار بمعنى عند الضغط على ال Label يتم تفعيل الإختيار
- قائمة الخيارات الأولى يكون إسمها skills
- قائمة الإختيارات الثانية يكون إسمها job
- في كل خيار من الخيارات يجب أن يكون هناك خيار واحد على الأقل Checked
- يجب أن تظهر البيانات التي تم إرسالها في الرابط بنفس الشكل الموجود في الصورة التالية
التكليف 05
- قم بإضافة ما يلي للنموذج السابق
- قائمة من الخيارات تخص المجال البرمجي فيها مجموعة لغات برمجة بإصداراتهم لتختار من بينهم
- شاهد الصورة لتقوم بعمل المهمة مثل الصورة
- بعدها قم بإنشاء حقل يقبل كتابة نص طويل جدا ويكون إسمه brief
- الحقل يحتوي على نص مسبق لتوضيح ما سوف يتم كتابته وقيمته هي Write Here Why You Want To Learn Programming
التكليف 06
- قم بإنشاء نموذج يحتوي على ثلاث حقول إدخال
- كل حقل يجب أن يحتوي على Label قبله
- الحقول هي Search, File, URL
- تأكد أن حقل ال Search يحتوي على رسالة للشخص بالمحتوى التالي Enter A Search Word
- عند فتح الصفحة تأكد أن مؤشر الكتابة مركز عند الحقل Search
- تأكد من أن حقل URL لحتوي على ال Attribute الخاص بجعل الحقل إجباري
- قم بعمل زر يقوم بإفراغ محتوى البيانات التي كتبها المستخدم ويكون إسمه Empty
- تأكد أن البيانات داخل النموذج يتم إرسالها في Tab جديدة وليس في نفس الصفحة
- تأكد أن الشخص لو لم يكتب أي قيمة في حقل ال URL سوف يتم تجاهل ال Required Attribute ويتم إرسال البيانات بدون مشكلة
- شاهد الشكل النهائي المطلوب
- بعد الإنتهاء قم بإضافة حقلين للنموذج السابق
- الحقول هي Date, Month
- يجب أن يكون القيمة الإفتراضية لحقل ال Date هي 25/10/1982
- يجب أن تكون القيمة الإفتراضية لحقل الشهور هي October 1982
- شاهد الشكل النهائي المطلوب
التكليف 07
قم بكتابة النص التالي وتأكد أنه سوف يظهر في المتصفح كما في الصورة التالية. يجب عليك وضع الأربعة أسطر في عنصر واحد فقط
Hello Line One
Hello Line Two
Hello Line Three
Hello Line Fourالتكليف 08
قم بإستدعاء موقع Elzero داخل صفحتك مع جعل عرض الموقع يملأ الشاشة والطول يكون 400 Pixel. شاهد الصورة لترى المطلوب