الدرس الثالث: إنشاء نموذج بلغة HTML (٣)
انظر إلى السؤال الرابع في الصفحة، والذي يطلب منك تحديد الجمل الصحيحة والجمل الخاطئة من بين اثنتي عشرة عبارة. تذكر خصائص التطبيقات السحابية وأدوات التخزين ومشاركة المستندات مثل ون درايف وجوجل درايف. اقرأ كل عبارة بتمعن، فمثلاً إذا كانت العبارة تقول إن ون درايف يتيح حفظ الملاحظات عبر الإنترنت دون إمكان مشاركتها مع الآخرين، فكر في الغرض الأساسي من التخزين السحابي الذي يعتمد على التعاون والمشاركة، وحدد بناء على ذلك هل الجملة صحيحة أم خاطئة.
يقوم إنشاء النماذج بلغة HTML على جمع بيانات المستخدمين وإرسالها إلى الخادم عبر عناصر أساسية تبدأ بوسم form وتنتهي به. لتصميم نموذج، تستخدم الوسم input لتحديد نوع الحقل المطلوب، مثل حقل النص أو البريد الإلكتروني أو كلمة المرور، بالإضافة إلى زر الإرسال باستخدام type equal submit. انظر إلى المثال:
، فهذا يجمع الاسم ويرسله عند الضغط على زر الإرسال.الفكرة الأساسية
النماذج في صفحات الويب هي الوسيلة الأساسية لجمع المعلومات من المستخدمين، مثل الأسماء، وكلمات المرور، والبريد الإلكتروني، ثم إرسالها إلى الخادم لمعالجتها. يعتمد بناء النموذج على استخدام وسوم محددة تبدأ بوسم الحاوية الرئيسي وتتضمن حقول الإدخال والأزرار.
الشرح
لإنشاء أي نموذج، تستخدم الوسم الرئيسي form. هذا الوسم يحيط بكل عناصر النموذج ويحتوي عادة على خاصية action لتحديد الرابط الذي ستُرسل إليه البيانات عند النقر على زر الإرسال. داخل هذا الوسم، توضع حقول الإدخال عبر الوسم input، وهو عنصر مفرد لا يحتاج إلى وسم إغلاق.
تتغير وظيفة الحقل بناء على القيمة المسندة إلى الخاصية type. إذا كتبت type equal text، فأنت تنشئ حقل نص عاديا لإدخال الكلمات. وإذا كتبت type equal email، فأ أنت تنشئ حقل مخصصا للبريد الإلكتروني مع خاصية تحقق تلقائية من صحة الكتابة. وإذا كتبت type equal password، فأنت تنشئ حقلا يخفي الحروف برموز سرية أثناء الكتابة. أما لإرسال البيانات، فتستخدم type equal submit لإنشاء زر الاعتماد.
مثال محلول خطوة بخطوة
المطلوب: إنشاء نموذج يحتوي على حقل لإدخال الاسم وحقل لكلمة المرور وزر للإرسال إلى رابط الخادم. الخطوة الأولى: افتح حاوية النموذج وحدد وجهة البيانات باستخدام الخاصية action هكذا:
لتصبح الكود كاملا بالشكل التالي:أخطاء شائعة
نسيان إغلاق الوسم الرئيس form في نهاية النموذج. كتابة الوسم input كع عنصر مزدوج يحتاج إلى وسم إغلاق منفصل، والصحيح أنه عنصر مفرد. الخطأ في كتابة قيم الخصائص مثل نسيان كتابة password أو email بطريقة صحيحة داخل الخاصية type.
سؤالان للتدريب مع الإجابة
السؤال الأول: اكتب أمر HTML لإضافة زر إرسال بقيمة إرسال داخل النموذج. الإجابة: السؤال الثاني: اكتب أمر HTML لإنشاء حقل إدخال مخصص للبريد الإلكتروني. الإجابة: