كيفية عمل النموذج - كتاب المهارات الرقمية - الصف 10 - الفصل 1 - المملكة العربية السعودية

الكتاب: كتاب المهارات الرقمية - الصف 10 - الفصل 1 | المادة: المهارات الرقمية | المرحلة: الصف 10 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

الدرس: كيفية عمل النموذج

📚 معلومات الصفحة

الكتاب: كتاب المهارات الرقمية - الصف 10 - الفصل 1 | المادة: المهارات الرقمية | المرحلة: الصف 10 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

📝 ملخص الصفحة

ملخص محتوى الصفحة:

تتناول هذه الصفحة آلية عمل النماذج (Forms) في لغة HTML وكيفية إرسال البيانات ومعالجتها.

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

  • عندما يملأ المستخدم نموذجًا في موقع إلكتروني ويضغط على زر الإرسال، تُرسل المعلومات إلى الخادم (السيرفر) إما للمعالجة أو للحفظ.
  • يستقبل الخادم البيانات من النموذج ويقوم بمعالجتها.
  • ينشئ الخادم صفحة استجابة جديدة ويرسلها إلى المستخدم.

    • بنية النموذج في HTML:

    * يحتوي النموذج على عناصر تحكم متعددة (مثل مربعات الإدخال والخيارات)، كل منها يجمع نوعًا مختلفًا من المعلومات.

    * توضع عناصر التحكم هذه داخل الوسم `

    `.

    * يتطلب الوسم `` سمة (attribute) مميزة تسمى `action`. تستقبل هذه السمة قيمة هي عنوان الارتباط التشعبي (URL) للصفحة الموجودة على الخادم والتي ستستقبل معلومات النموذج عند إرسالها.

    مثال على استخدام سمة `action`:

    ```html

    ```

    * المثال أعلاه هو العنوان الذي سيُستخدم في الكتاب.

    * لكي يعمل النموذج الخاص بك بشكل صحيح، تحتاج إلى استبدال هذا العنوان بآخر في الخادم المحلي الخاص بك.

    📋 المحتوى المنظم

    📖 محتوى تعليمي مفصّل

    كيفية عمل النموذج

    نوع: محتوى تعليمي

    عندما ترى نموذجًا في موقع إلكتروني، ستلاحظ وجود مربعات الإدخال والخيارات وجميعها يُنفذ بلغة HTML. عندما يملأ المستخدم النموذج ويضغط على زر الإرسال، يجري إرسال المعلومات إلى الخادم للمعالجة أو للحفظ.

    نوع: محتوى تعليمي

    تُرسل البيانات من النموذج إلى الخادم.

    نوع: محتوى تعليمي

    يستقبل الخادم البيانات من النموذج ويقوم بمعالجتها.

    نوع: محتوى تعليمي

    يُنشئ الخادم صفحة استجابة جديدة تُرسل إلى المستخدم.

    بنية النموذج

    نوع: محتوى تعليمي

    يحتوي النموذج على عناصر تحكم متعددة، ويجمع كل منها معلومات مختلفة. توجد عناصر التحكم بالنماذج داخل وسم <form> ويتطلب كل وسم سمة مميزة. تستقبل السمة قيمة هي عنوان الارتباط التشعبي (URL) للصفحة الموجودة على الخادم التي تستقبل معلومات من النموذج عند إرسالها. على سبيل المثال:

    نوع: محتوى تعليمي

    هذا هو عنوان النموذج الذي سنستخدمه في الكتاب، لكي يعمل النموذج الخاص بك بشكل صحيح، تحتاج إلى استبدال هذا العنوان بآخر في الخادم المحلي الخاص بك.

    نوع: METADATA

    Ministry of Education 2025 - 1447

    نوع: METADATA

    190

    🔍 عناصر مرئية

    كيفية عمل النموذج

    A circular diagram illustrating the process of form submission and server response. It shows a laptop sending data to a server, which processes it and sends back a response. Numbered steps (1, 2, 3) indicate the flow.

    A highlighted rectangular box containing an HTML form tag with an action attribute specifying the URL for form submission.

    📄 النص الكامل للصفحة

    --- SECTION: كيفية عمل النموذج --- عندما ترى نموذجًا في موقع إلكتروني، ستلاحظ وجود مربعات الإدخال والخيارات وجميعها يُنفذ بلغة HTML. عندما يملأ المستخدم النموذج ويضغط على زر الإرسال، يجري إرسال المعلومات إلى الخادم للمعالجة أو للحفظ. تُرسل البيانات من النموذج إلى الخادم. يستقبل الخادم البيانات من النموذج ويقوم بمعالجتها. يُنشئ الخادم صفحة استجابة جديدة تُرسل إلى المستخدم. --- SECTION: بنية النموذج --- يحتوي النموذج على عناصر تحكم متعددة، ويجمع كل منها معلومات مختلفة. توجد عناصر التحكم بالنماذج داخل وسم <form> ويتطلب كل وسم سمة مميزة. تستقبل السمة قيمة هي عنوان الارتباط التشعبي (URL) للصفحة الموجودة على الخادم التي تستقبل معلومات من النموذج عند إرسالها. على سبيل المثال: هذا هو عنوان النموذج الذي سنستخدمه في الكتاب، لكي يعمل النموذج الخاص بك بشكل صحيح، تحتاج إلى استبدال هذا العنوان بآخر في الخادم المحلي الخاص بك. Ministry of Education 2025 - 1447 190 --- VISUAL CONTEXT --- **DIAGRAM**: كيفية عمل النموذج Description: A circular diagram illustrating the process of form submission and server response. It shows a laptop sending data to a server, which processes it and sends back a response. Numbered steps (1, 2, 3) indicate the flow. Context: Explains the workflow of a web form submission process. **CODE_SNIPPET**: Untitled Description: A highlighted rectangular box containing an HTML form tag with an action attribute specifying the URL for form submission. Context: Illustrates the HTML <form> tag and its 'action' attribute, crucial for understanding how web forms send data to a server.

    🎴 بطاقات تعليمية للمراجعة

    عدد البطاقات: 3 بطاقة لهذه الصفحة

    ما هي الخطوات الأساسية لعمل نموذج ويب بعد أن يضغط المستخدم على زر الإرسال؟

    • أ) يُخزن النموذج البيانات محلياً، ثم يعرض رسالة تأكيد للمستخدم دون اتصال بالخادم.
    • ب) تُرسل البيانات إلى الخادم، يستقبل الخادم البيانات ويعالجها، ثم يُنشئ صفحة استجابة جديدة تُرسل إلى المستخدم.
    • ج) يُرسل النموذج مباشرة إلى قاعدة البيانات، ثم تُعاد البيانات نفسها إلى صفحة النموذج.
    • د) يُرسل النموذج بريداً إلكترونياً إلى مسؤول الموقع، الذي يقوم يدوياً بمعالجة الطلب.

    الإجابة الصحيحة: b

    الإجابة: تُرسل البيانات إلى الخادم، يستقبل الخادم البيانات ويعالجها، ثم يُنشئ صفحة استجابة جديدة تُرسل إلى المستخدم.

    الشرح: 1. تُرسل البيانات المُدخلة في النموذج من متصفح المستخدم إلى الخادم. 2. يستقبل الخادم هذه البيانات ويقوم بمعالجتها (مثل الحفظ في قاعدة بيانات). 3. يُنشئ الخادم صفحة ويب جديدة (صفحة استجابة) تُرسل مرة أخرى إلى متصفح المستخدم لعرضها.

    تلميح: تتضمن العملية ثلاث مراحل رئيسية تبدأ من المستخدم وتنتهي بعودته إليه.

    التصنيف: خطوات | المستوى: سهل

    ما هو الغرض الرئيسي من سمة `action` في وسم `<form>` بلغة HTML؟

    • أ) تحديد لون وخلفية النموذج لعرضه في المتصفح.
    • ب) تحديد عنوان البريد الإلكتروني الذي سيُرسل إليه محتوى النموذج.
    • ج) تحديد عنوان الارتباط التشعبي (URL) للصفحة الموجودة على الخادم التي تستقبل معلومات النموذج عند إرسالها.
    • د) تحديد اسم قاعدة البيانات التي سيتم حفظ المعلومات فيها.

    الإجابة الصحيحة: c

    الإجابة: تحديد عنوان الارتباط التشعبي (URL) للصفحة الموجودة على الخادم التي تستقبل معلومات النموذج عند إرسالها.

    الشرح: سمة `action` هي سمة إلزامية داخل وسم `<form>` في HTML. قيمتها هي عنوان URL (مثل `process.php` أو `/submit`) يشير إلى الملف أو البرنامج النصي الموجود على الخادم المسؤول عن استقبال ومعالجة البيانات التي أرسلها المستخدم عبر النموذج.

    تلميح: هذه السمة تخبر النموذج إلى أين يرسل البيانات.

    التصنيف: تعريف | المستوى: متوسط

    أين يجب أن توجد عناصر التحكم بالنماذج (مثل مربعات النص والأزرار) في صفحة HTML لتعمل كجزء من نموذج قابل للإرسال؟

    • أ) داخل وسم `<head>` في الصفحة.
    • ب) داخل وسم `<body>` ولكن خارج أي وسوم أخرى.
    • ج) داخل وسم `<form>`.
    • د) داخل وسم `<script>`.

    الإجابة الصحيحة: c

    الإجابة: داخل وسم `<form>`.

    الشرح: يُستخدم وسم `<form>` في HTML لإنشاء حاوية أو منطقة لجمع بيانات الإدخال من المستخدم. لكي يتم إرسال البيانات من عناصر التحكم (مثل `<input>`, `<select>`, `<textarea>`) إلى الخادم معاً، يجب وضعها جميعاً داخل وسم `<form>` المغلق (`</form>`).

    تلميح: هذا الوسم هو الحاوية التي تجمع كل عناصر الإدخال معاً.

    التصنيف: مفهوم جوهري | المستوى: سهل