إنشاء نموذج بلغة HTML | الوحدة الثالثة | الدرس الأول
إنشاء نموذج بلغة HTML هو عنوان الدرس الأول من الوحدة الثالثة التي تحمل اسم “البرمجة باستخدام لغة ترميز النص التشعبي” في الفصل الدراسي الثاني من مقرر “تقنية رقمية 1”.
ستتعرف في هذا الموضوع على كيفية إنشاء نموذج اتصال بلغة (HTML)، وذلك بالتعرُّف على مفهوم النموذج بلغة HTML وبنيته، وخطوات عمله، بالإضافة إلى استخدام الأنواع المختلفة لعنصر <input> في HTML.
لذا قم بقراءة نواتج التعلُّم بعناية، ثم أعد قراءتها وتأكَّد من تحصيل محتوياتها بعد انتهائك من دراسة الموضوع.
نواتج التعلُّم
- معرفة مفهوم النموذج بلغة HTML.
- معرفة كيفية عمل النموذج.
- معرفة بنية النموذج.
- التحكُّم بعناصر الإدخال للنموذج باستخدام وسوم <input>.
- تجميع العناصر ذات الصلة في النموذج باستخدام وسم <fieldset>.
هيا لنبدأ!
مقدمة – إنشاء نموذج بلغة HTML
تعلمت في الفصل الدراسي السابق كيفية إنشاء صفحة بلغة HTML باستخدام الوسوم الأساسية.
وأثناء العمل على تصميم موقعك الإلكتروني، قد تحتاج إلى نموذج لإدخال البيانات.
في هذا الموضوع ستتعرَّف على كيفية إنشاء نموذج بلغة HTML.
مفهوم النموذج بلغة HTML
النموذج (Form) مستند يحتوي على حقول لإدخال البيانات.
يتضمن كل حقل في النموذج على اسم محدَّد يمكِّن المُستخدِم الذي يتصفَّح النموذج من معرفة عناصره المختلفة.
النموذج الأكثر استخدامًا هي: نموذج مربع بحث جوجل (Google) ونموذج التسجيل على جوجل (Google).
لمعرفة المزيد من المعلومات عن النماذج في HTML، قم بالاطّلاع على الرابط التالي:
كيفية عمل النموذج
عندما ترى نموذجًا في موقع إلكتروني، ستلاحظ وجود مربعات الإدخال والخيارات وجميعها ينفَّذ بلغة HTML.
عندما يملأ المُستخدِم النموذج ويضغط على زر الإرسال، يجري إرسال المعلومات إلى الخادم للمعالجة أو للحفظ.
بنية النموذج
يحتوي النموذج على عناصر تحكُّم متعدِّدة، ويجمع كل منها معلومات مختلفة.
توجد عناصر التحكُّم بالنماذج داخل وسم <form> ويتطلَّب كل وسم سمة مميزة.
تستقبل السمة قيمة هي عنوان الارتباط التشعبي (URL) للصفحة الموجودة على الخادم التي تستقبل معلومات من النموذج عند إرسالها.
على سبيل المثال:
وسم <input>
يتم استخدام وسم <input> للتحكُّم بعناصر النموذج، والتي يمكِن عرضها بطرق مختلفة اعتمادًا على نوع السمة.
يستعرض الجدول التالي بعضها:
لاحظ أن
وسم <input> لا يحتوي على وسم إغلاق.
لتُلقِ نظرة على مثال لكل نوع:
بإمكانك مراجعة محتوى الموضوع من بدايته وحتى نهاية هذا القسم، من خلال هذا الرابط:
وسم <fieldset>
يتم استخدام وسم <fieldset> لتجميع العناصر ذات الصلة في النموذج.
لتكتب المقطع البرمجي التالي بإضافة وسم <textarea> لإنشاء حقل نصي متعدِّد الأسطر ثم شاهد النتيجة.
صفحة مشجعي كرة القدم
حان الوقت لتطبيق ما تعلمته عن النماذج على الموقع الإلكتروني الخاص بك الذي أنشأته بلغة HTML في الفصل الدراسي الأول.
في المجلد الرئيس أنشأت صفحة باسم “contact-form.html”.
بإمكانك مراجعة محتوى “إنشاء نموذج بلغة HTML” بالكامل، بدايةً من عنوان “وسم <fieldset>” وحتى نهاية الموضوع، من خلال الرابط التالي:
إلى هنا يكون قد انتهى موضوع “إنشاء نموذج بلغة HTML“، لا تنسوا مراجعة نواتج التعلُّم أعلى المقال، وانتظرونا في الموضوع القادم!