الحصة الأولى : النموذج Form
شاهد شرح الحصة
فيديو
يمكنك مشاهدة فيديو لشرح الحصة بشكل عملي وبالتطبيق على الكمبيوتر .. من
خلال الفيديو التالي ..
شاهد شرح الفيديو للمنهج باللغة العربية
شاهد شرح الفيديو للمنهج باللغة الإنجليزية
تذكر أن
·
لبدء كتابة أكواد لغة الـ HTML نفتح برنامج لكتابة الكلمات، ونبدأ بكتابة الأكواد
·
يجب أن يبدأ الكود بتاج <html> وينتهي بتاج </html>
·
لكتابة معلومات الصفحة نكتبها في منطقة <head>
…….. </head>
·
لكتابة محتوى الصفحة نكتبها في منطقة <body>
…….. </body>
الشكل العام
لأمر HTML
<html>
<head>
<title> عنوان الصفحة </title>
</head>
<body>
محتوى الصفحة
</body>
</head>
الفكرة العامة
لمنهج الفصل الدراسي الثاني
إنشاء صفحة ويب تفاعلية لإدخال البيانات الشخصية من خلال نموذج كما بالشكل
التالي:
وسنقوم خلال الفترة القادمة بتعليمكم كيف تقوم بإنشاء نموذج كما هو موضح
بكافة الأدوات والعناصر الموجودة، وكذلك كيف يمكنك ربط النموذج بصفحات الموقع الذي
سنقوم بإنشائه.
س1: ما هي أشهر
الأدوات المستخدمة في إنشاء نموذج في صفحة الويب؟
هناك العديد من الأدوات المتاحة في لغة html لتساعدنا في إنشاء نماذج في
صفحات الويب .. ومنها:
1- النموذج Form:
نافذة لإضافة مجموعة عناصر صفحة الويب مثل أزرار وحقول تستخدم في ادخال
البيانات بغرض إرسالها لموقع الويب ليتم تخزينها
ولإنشاء النموذج في صفحة الويب، نستخدم الكود التالي لبداية النموذج<Form> ولنهاية النموذج نكتب </Form>
2- حقل النص Text:
عبارة عن حقل (مكان) يستقبل مدخلات المستخدم النصية (الاسم – العنوان –
البريد الإلكتروني – رسالة .......)
ولإنشاء حقل النص في صفحة الويب، نستخدم الكود التالي <input type = “text” >
3- حقل كلمة السر Password:
عبارة عن حقل (مكان) يستقبل كلمة السر الخاصة بالمستخدم، ويشبه حقل النص،
إلا أنه يظهر رمز * بدلًا من الحروف والأرقام التي يتم كتابتها فيه لإخفاء كلمة
السر.
ولإدراج حقل كلمة السر في النموذج، نستخدم الكود التالي: <input
type = “password”>
4- زر اختيار بديل واحد Radio:
ويستخدم لعرض عدة بدائل يختار منها المستخدم بديل واحد فقط، ويجب أن يختار،
ويستخدم بكثرة في حالة السؤال عن نوع المستخدم، (ذكر / أنثى)
ويمكن إدراج زر اختيار بديل واحد Radio باستخدام الكود التالي: <input
type = “radio”>
س2: الكود اللازم
لعرض النموذج المرفق في صفحة ويب بعنوان بيانات الطالب
سنقوم الآن باستخدام لغة HTML بكتابة كود يعرض النموذج المطلوب في صفحة ويب عنوانها "بيانات
الطالب"
عرض اختيارات
النوع (ذكر / أنثى) في صفحة ويب
لنتمكن من عرض اختيارات النوع (ذكر / أنثى) على المستخدم ليتمكن من اختيار
واحد منها، نقوم باستخدام أمر إدراج أداة اختيار بديل واحد فقط Radio مرتين، مرة مع كلمة Male أو ذكر ومرة أخرى مع كلمة Female أو أنثى، كالتالي:
Male <input type=”radio”> <br>
Female <input type =”radio”>
ويلاحظ أن عند تطبيق ذلك الكود يظهر الخيارين ولكن يتمكن المستخدم من اختيار كلا الخيارين .. كأن يختار الذكر والأنثى في نفس الوقت .. وهذا خطأ برمجي ..
كيف يمكن التغلب
على مشكلة اختيار أداتين Radio في نفس الوقت ؟
ذكرنا في الجزء السابق أن المستخدم يتمكن من اختيار كلا الخيارين في أداة Radio بالنسبة للنوع ذكر / أنثى
وهذا خطأ برمجي كما أوضحنا من قبل .. ولنتمكن من التغلب على هذه المشكلة
نقوم بإعطاء نفس الاسم لكلا الخيارين حتى نجبر الموقع على تحديد خيار واحد فقط
منهما .. فلا يتمكن المستخدم من اختيارهما في نفس الوقت.
وفي هذه الحالة يكون الكود بالشكل التالي:
Male <input type=”radio” name= “a”> <br>
Female <input type=”radio” name=”a”>
واجب الحصة
يمكنك مراجعة المعلومات التي تعلمتها من خلال محاولة إجابتك على الأسئلة
المتوفرة في الرابط التالي
تعليقات
إرسال تعليق