الصف الثاني الثانوي - حاسب وبرمجة
الوحدة الثانية: تصميم وتطوير مواقع الويب التفاعلية
بناء النماذج، حقول الإدخال، وخيارات التحقق القياسية
انقر على أي جملة للاستماع إليها مباشرة 👆
تُعد النماذج التفاعلية الوسيلة المحورية لاستقبال وتجميع البيانات من المستخدمين على شبكة الإنترنت، كبيانات تسجيل الطلاب، والاستبانات، ونماذج الاتصال. في هذه المحطة التعليمية، نتعرف على بنية الوسم form، والأنواع المتطورة لحقول الإدخال input في HTML5، وكيفية توظيف سمات التحقق المضمنة مثل required وpattern لضمان دقة وسلامة البيانات المدخلة قبل إرسالها إلى الخادم.
1. الهيكل الأساسي للنموذج التفاعلي
يُبنى النموذج بواسطة الوسم <form> الذي يحتوي على خاصيتين محوريتين :
action: يحدد مسار أو ملف الخادم الذي ستُرسل إليه البيانات لمعالجتها.method: تحدد طريقة إرسال البيانات، ولها قيمتان رئيسيتان:- GET : تُرسل البيانات مدمجة في شريط العنوان (URL)، وتناسب عمليات البحث غير السرية.
- POST : تُرسل البيانات بشكل محمي داخل جسم الطلب، وهي الإلزامية لكلمات المرور والبيانات الحساسة.
2. أنواع حقول الإدخال المتقدمة (Input Types)
النوع type | الوظيفة وطبيعة البيانات | المظهر والتحقق التلقائي |
|---|---|---|
type="text" |
حقل نصي عادي مخصص لإدخال الاسم أو العنوان في سطر واحد. | مربع كتابة قياسي. |
type="password" |
إدخال كلمات المرور الحساسة. | تظهر الحروف مشفرة على شكل نقاط أو نجوم لحماية الخصوصية. |
type="email" |
إدخال البريد الإلكتروني. | يتحقق المتصفح تلقائياً من احتواء النص على رمز @ واسم النطاق. |
type="number" |
إدخال الأرقام فقط (كالعمر أو الدرجة). | يدعم خاصيتي الحد الأدنى min والأقصى max والخطوة step. |
type="radio" |
زر اختيار بديل واحد فقط من بين مجموعة خيارات (مثل: ذكر / أنثى). | دوائر اختيارية، ويجب توحيد الخاصية name لكافة أزرار المجموعة الواحدة. |
type="checkbox" |
صندوق اختيار يتيح للمستخدم تحديد أكثر من خيار في نفس الوقت (مثل الهوايات). | مربعات اختيار مستقلة يمكن تفعيل أكثر من واحد منها. |
type="submit" |
زر إرسال بيانات النموذج إلى الخادم لبدء المعالجة. | زر تفاعلي ينفذ عملية الإرسال. |
type="reset" |
زر إعادة ضبط وتفريغ كافة الحقول وإعادتها لقيمها الافتراضية. | زر مسح البيانات. |
3. خصائص التحقق من صحة البيانات (Form Validation)
وفرت HTML5 ميزات تحقق أصلية دون الحاجة المبدئية لكتابة أكواد جافاسكريبت معقدة :
required: خاصية تجعل تعبئة الحقل إلزامية، ويمنع المتصفح إرسال النموذج إذا تُرِك فارغاً.placeholder: نص توضيحي خفيف يظهر داخل الحقل كإرشاد ويختفي فور بدء الكتابة.value: القيمة الفعلية المبدئية أو المخزنة داخل حقل الإدخال.<textarea>: عنصر مخصص لإدخال نصوص طويلة متعددة الأسطر كالرسائل والتعليقات.<select>مع<option>: لإنشاء قوائم الاختيار المنسدلة (Drop-down lists).
تطبيقات تفاعلية على النماذج
الإجابة البرمجية : من خلال منح جميع أزرار الاختيار البديل التابعة للمجموعة الواحدة نفس القيمة في الخاصية
name (مثال: name="gender" لجميع الأزرار)، مما يجعل المتصفح يتيح اختيار زر واحد فقط ويلغي تلقائياً تحديد الأزرار الأخرى.
الإجابة البرمجية : طريقة
GET ترسل البيانات مكشوفة عبر شريط العنوان وهي محدودة الحجم، بينما POST ترسل البيانات مخفية ومشفرة داخل جسم حزمة HTTP وهي الأنسب للبيانات الحساسة وكلمات المرور وتسمح بحجم بيانات ضخم.
اضغط على أي بطاقة لاكتشاف المعنى الدقيق، واضغط على أيقونة الصوت للاستماع للنطق:
Form
اضغط لاكتشاف الدلالة والشرح 👆
النموذج التفاعلي
💡 إضاءة وتوضيح: حاوية تجميع مدخلات وبيانات المستخدم في الويب
Input
اضغط لاكتشاف الدلالة والشرح 👆
عنصر أو حقل الإدخال
💡 إضاءة وتوضيح: العنصر الأساسي لاستقبال مدخلات المستخدم بمختلف أنواعها
Textarea
اضغط لاكتشاف الدلالة والشرح 👆
حقل النص المتعدد الأسطر
💡 إضاءة وتوضيح: مساحة مخصصة لكتابة المقالات والتعليقات الطويلة
Radio Button
اضغط لاكتشاف الدلالة والشرح 👆
زر الاختيار الفردي البديل
💡 إضاءة وتوضيح: يتيح اختيار بديل وحيد فقط من بين عدة خيارات
Checkbox
اضغط لاكتشاف الدلالة والشرح 👆
صندوق الاختيار المتعدد
💡 إضاءة وتوضيح: يتيح اختيار أكثر من خيار في نفس اللحظة
Submit Button
اضغط لاكتشاف الدلالة والشرح 👆
زر إرسال بيانات النموذج
💡 إضاءة وتوضيح: الزر المسؤول عن ترحيل البيانات إلى الخادم
Reset Button
اضغط لاكتشاف الدلالة والشرح 👆
زر إعادة الضبط والتفريغ
💡 إضاءة وتوضيح: يمسح كافة المدخلات ويعيد الحقول لوضعها الابتدائي
Action
اضغط لاكتشاف الدلالة والشرح 👆
وجهة معالجة بيانات النموذج
💡 إضاءة وتوضيح: خاصية تحدد الصفحة أو البرنامج المستقبل للبيانات بالخادم
Method
اضغط لاكتشاف الدلالة والشرح 👆
طريقة إرسال البيانات (GET/POST)
💡 إضاءة وتوضيح: تحدد أسلوب نقل البيانات في حزمة بروتوكول HTTP
Required
اضغط لاكتشاف الدلالة والشرح 👆
خاصية الإلزام بالملء
💡 إضاءة وتوضيح: تمنع إرسال النموذج إذا كان الحقل فارغاً
Placeholder
اضغط لاكتشاف الدلالة والشرح 👆
النص التوضيحي الإرشادي المؤقت
💡 إضاءة وتوضيح: تلميح يظهر داخل المربع ويختفي بمجرد الكتابة
Select & Option
اضغط لاكتشاف الدلالة والشرح 👆
قائمة الخيارات المنسدلة
💡 إضاءة وتوضيح: عنصر لعرض قائمة منسدلة يختار منها المستخدم
اضغط على الإجابة لتتحقق من فهمك وتكتشف التفسير النموذجي فورياً:
1
أي من أنواع حقول الإدخال التالية يُخفي الحروف المكتوبة ويستبدلها بنقاط لحماية السرية ؟
2
لإلزام المستخدم بإدخال قيمة في حقل معين قبل السماح له بإرسال النموذج، نستخدم الخاصية :
3
ما العنصر المناسب لإنشاء مربع نصي يسمح للمستخدم بكتابة مقال أو رسالة شكوى طويلة متعددة الأسطر ؟