دورة Html الدرس 10 - النماذج forms

السلام عليكم ورحمة الله وبركاته
سنتحدث في درسنا اليوم عن مايسمى النماذج forms في لغة برمجة الويب HTML
حيث أنك أيها الزائر أو العضو في الصفحة الأكثر شمولاً عن النماذج في الانترنت كله
النماذج كتعريف : هي طرق تسمح للمستخدم أو لزائر الموقع بإدخال بيانات لهذا الموقع
وكمثال عندما تكتب مشاركة في المنتدى فإنك تدخل بيانات و عندما تكتب رسالة بريد الكتروني
فإنك تدخل بيانات و عندما تسجل في موقع و تختار بلدك وعمرك و اسمك و ما إلى ذلك فإنك تدخل بيانات لهذا الموقع
وطرق إدخال البيانات هذه تتم عن طريق النماذج forms



ملاحظة قبل بداية الدرس :
في درس اليوم سنتعرف إلى أشكال النماذج و أساسياتها وطرق كتابة الوسوم وخصائصها
ولكن الفائدة الحقيقية للنماذج تكون مع php و javascript وهما لغتنان سندرسهما لاحقاً
حيث يمكن من خلالها معالجة البيانات التي يتم إدخالها
مثلاً : تسجيل دخول مستخدم عند إدخال اسمه

طريقة كتابة النماذج:

نستعمل عادة الوسم form لعمل نموذج ويكون كالتالي:

محتوى النموذج هنا

حيث نضع بين وسمتي الـ form محتوى النموذج
وسندرج طرق الإدخال في الفقرات التالية من درسنا :

إدخال النصوص input text

بشكل عام لعمل المدخلات نستعمل الوسم input
ويكتب داخل الفورم form ( النموذج ) كما يلي:

وبدلاً من كلمة النوع في الكود السابق سنضع نوع المدخل
وستتضح لك الأمور بشكل تدريجي ...
نوع مدخل النصوص يسمى text كالتالي:

ويستخدم لإدخال نص من قبل المستخدم
يكتب الكود الذي يؤدي هذا الغرض كما يلي:

جربها على صفحة الأكواد التابعة لنا بالضغط هنا
أو على أحد البرامج التي تستعملها مثل phpDesigner 7 , expression web
و أنصح بهم أو أي برنامج آخر قوي

وللنماذج ومحتوياتها عدة خصائص تمكننا من التحكم
من هذه الخصائص خاصة value مع الوسم input
مثال للفهم :

لاحظ أن الخاصة value تستخدم لوضع قيمة ابتدائية للوسم input حيث ستكون النتيجة كالتالي:

الخاصتان name , id
تستخدمان لتسمية الجزء الذي وضعناه داخل النموذج form لتمييزه عن غيره
مثال :

الاسم






اسم العائلة

في المثال السابق لدينا نموذج form وضعنا له الخاصة dir للتحكم بجهته من اليمين إلى اليسار
من أجل اللغة العربية
وداخل هذا الفورم form وضعنا حقل نصي أول كتبنا بجانبه الاسم
ووضعنا له قيمة ابتدائية باستخدام الخاصة value
وسميناه fname
و أعطيناه عنوان fname
و يوجد حقل نصي ثاني كتبنا بجانبه اسم العائلة
وأعطيناه قيمة ابتدائية : اسم العائلة هنا
وسميناه و أعطيناه العنوان lname

ملاحظة :
يمكن التحكم بمساحة حقل الإدخال باستعمال الخاصة size كما يلي:

أو باستخدام css لاحقاً

ملاحظات على ماسبق :
بالنسبة للاسم والعنوان يفيدنا جداً في برمجة php , JavaScript
وذلك لمعالجة البيانات المدخلة في الحقول النصية
فمثلاً نريد أن نأخذ اسم الشخص و نظهر له عبارة مرحباً يا .....
فلتمييز الحقول عن بعضها نضع لها أسماء وعناوين
وغالباً نضع اسم الحقل والعنوان نفسه
إذا كان هذا غير واضح فلا تقلق حالياً ليس مهم يهمنا لاحقاً

حقول الإدخال لكلمة السر password

مشابهة جداً لما سبق ولكن النوع password
أي أنها أحد أنواع حقول الإدخال input
بلا طولة سيرة عليكم يكتب كما يلي:

ويكون الناتج كما يلي:

وتستخدم هذه الطريقة بدلاً من السابقة في حقول كلمة السر
لكي لا يرى الشخص المجاور لك ما تكتب أو للحماية من بعض برامج التجسس
و الصيغة الكاملة و الأفضل تكون بإضافة الصفتين name , id لحقل الإدخال

الأزرار buttons

الأزرار في النماذج تعتبر أحد أنواع الادخالات input
ولإنشاء زر نكتب ما يلي:

ولكن يظهر بدون اسم ولإظهار اسم الزر نستعمل الخاصة value
إذاً بشكل عام الصيغة الكاملة لإنشاء زر تصبح كما يلي:

ويكون الشكل الناتج للزر:

أيضاً يفضل وضع اسم وعنوان name , id للزر

خانات الاختيار الوحيد

Radio Buttons

يبدو أنه لايوجد اسم محدد باللغة العربية لهذا النوع فمنهم من يسميه أزرار الراديو
ومنهم من يسميه حقول الاختيار أو خانات الاختيار الوحيد أو ...

المهم الآن طريقة العمل و الهدف منها:
الهدف هو اختيار قيمة من بين قيم متعددة
طريقة كتابة الكود ( أو الوسم أو التاغ أو tag أو الأمر البرمجي سمه كما تشاء :taksheer: )

ولكن من المهم جداً أن نعرف أنه في حالة وجود هذا النوع من خانات الاختيار فإنه
غالباً يكون لدينا عدة خيارات و يجب أن نضع اسم مشترك لهذه الخانات و قيم متعددة
مثال توضيحي:

أحمر


أصفر


أزرق

نتيجة التنفيذ :

لاحظ أنه في داخل النموذج السابق وضعنا الحقول input من نواع الراديو radio
ووضعنا اسم مشترك لهذه الحقول وهو color ولكن وضعنا لكل حقل قيمة value مختلفة
عن الآخر
و الآن عندما تختار مثلاً اللون الأصفر سيتم تحديد الخيار
وعند اختيار لون آخر مثل الأصفر سيزول التحديد الأول و يتم تحديد الأصفر
وهذا الفرق الجوهري بين النوع radio و النوع checkbox في الفقرة التالية:

خانات الاختيار المتعدد

checkbox

في النوع السابق لاحظنا أنه يمكننا اختيار نوع واحد فقط من الخيارات
ولكن ماذا لو كان هناك أكثر من نوع يمكن اختيارهم معاً
في هذا الحالة نلجأ إلى checkbox
الأمر يكتب كمايلي:

وفي هذا النوع كثيراً ما يكون لدينا عدة خيارات
وعندئذٍ نسمي الحقول باسم واحد ونضع قيم متعددة كما فعلنا في المثال السابق
سأعيد المثال السابق مع تغيير النوع

أحمر


أصفر


أزرق

النتيجة ستكون

ومن الواجب ذكره أنه في الحالتين السابقتين يمكننا أن نجعل أحد الخيارات قد تم اختياره بشكل
افتراضي
وذلك باستخدام

الخاصة checked

مثال :

أحمر


أصفر


أزرق




عربي


انكليزي


فرنسي

لاحظ كيف وضعنا الخاصية checked ووضعنا لها القيمة checked أيضاً
وهذا أحد الفروقات بين لغتي html و xhtml حيث أنه في html ليس من الضروري وضع القيمة
أي يكفي أن نكتب اسم الخاصة checked لجعل القيمة يتم اختيارها بشكل افتراضي
مثال:

أحمر


أزرق

الزر من نوع submit

يشبه في الشكل الزر button
و لكنه يستعمل في php لإرسال كافة البيانات التي تم ملؤها في النموذج لصفحة أخرى تقوم بمعالجة البيانات أو نفس الصفحة
صيغة الكتابة:

حيث يأخذ الاسم Submit Query ( يعني تسليم الاستعلام )
بشكل افتراضي ويمكن أن نضع له اسم آخر باستخدام الخاصة value

الآن قد يتساءل السائل أيهما أفضل
أن نستخدم الزر button أم الزر submit
و أنا بحسب معلوماتي المتواضعة و تجاربي أرى أن النوع button يستخدم مع الجافا سكريبت java script و النوع submit يستعمل مع php

الزر من نوع Reset

يستخدم لإعادة البيانات الافتراضية في كامل النموذج
الصيغة العامة لكتابته

مثال يوضح الفكرة:

راسلنا






اسمك





بريدك الالكتروني





التعليقات

النتيجة:

لاحظ أنه إذا ملأت الحقول بشيء ما ثم ضغطت على زر مسح البيانات سيتم إعادة الوضع الافتراضي
للحقول و إذا كانت فارغة ستعود فارغة

خصائص النماذج

ملاحظة : هذه الفقرة من الدرس يمكنك تجاهلها و الانتقال للتالية ( لأنها ستدرس بالتفصيل لاحقاً في Php ) أي اعتبرها للاطلاع
هناك خاصتين مهمتين من الخواص تستعملان داخل النموذج هما
action و method
تستعمل الخاصة action لتحديد المكان الذي سترسل له البيانات بعد ملئ النموذج
حيث يوضع مسار الصفحة التي ستعالج البيانات أو تترك فارغة لتعالج البيانات في نفس الصفحة
والخاصة action لتحديد طريقة إرسال البيانات إما بشكل مخفي post أو علني get
مثال:

عند كتابة معلومات في حقل الإدخال و الضغط على زر أرسل سيتم إرسال ما تم كتابته
إلى نفس الصفحة للمعالجة
طبعاً الكود لا يعمل شيء حالياً ولكن من باب الشمولية في درس النماذج تم ذكره

مساحة النص الطويل textarea

يستخدم هذا الوسم في النماذج لإدخال النصوص الطويلة
مثلاً عندما تكتب موضوع أو رد في المنتدى أو تكتب رسالة في نموذج إرسال رسائل
فإنك عملياً تكتبه في textarea
مثال:

اكتب رسالتك هنا  

ويمكن التحكم في أبعاد الحقل باستخدام الخاصتين
rows للارتفاع ( أو عدد الأعمدة )
cols للعرض ( أو عدد الصفوف )
مثال:

zuhairtaha@hotmail.com

وهذا الوسم يحوي جزئين فتح و إغلاق يكتب بينهما ما نريده أن يظهر بشكل افتراضي
المثال السابق ينتج عنه :

قوائم الاختيار select , option

وتستخدم لعمل قائمة تحوي عدة قيم بحيث نختار قيمة منها
وهذه تختلف قليلاً عما ورد في الاعلى فركزوا قليلاً :
نستخدم وسم select ونسميه name
و نضع بداخله عدة وسوم option هي عناصر القائمة
ولكل عنصر نضع قيمته value
( تشبه الجداول حيث يوجد في الجدول وسم خارجي tr و وسوم داخلية td )
ولعل المثال التالي يوضح ما ذكرت

فولفو

ساب

فيات

أودي

النتيجة :


ولعلك لاحظت أنه يمكن استخدام الخاصة selected لوضع القيمة الافتراضية لقائمة الاختيار
حيث تم استخدامها في الكود السابق

وضع الخيارات في مجموعات

يمكن تجيمع كل عدة خيارات في مجموعة من أجل التوضيح على الزائر للموقع
باستخدام الوسم optgroup داخل الوسم select
حيث توضع الوسوم option داخل optgroup
مثال:

  

    عبد الباسط عبد الصمد

    مشاري العفاسي

  

  

    أبو عبد الملك

    مشاري العرادة

  



 

النتيجة:


كما يمكن إضافة الخاصة size لجعل القائمة السابقة بشكل عريض
والخاصة multiple لإتاحة إمكانية اختيار أكثر من قيمة معاً ( يمكن ذلك بالضغط على زر ctrl و الضغط على عدة قيم )
مثال :

    عبد الباسط عبد الصمد

    مشاري العفاسي

    أبو عبد الملك

    مشاري العرادة

أحمد بوخاطر





 

النتيجة :



نموذج رفع الملفات:
يستخدم لتحديد صورة أو ملف من جهاز الكمبيوتر لرفعها إلى الانترنت
المثال:

تجميع عدة عناصر داخل النموذج في مجموعة
fieldset و legend

يستعمل الوسم fieldset كوسم خارجي و داخله الوسم legend لوضع عنوان للمجموعة
ثم بقية عناصر النموذج
بالمثال تتضح الأمور:

المعلومات الشخصية


اسمك 


بريدك الالكتروني 


تاريخ الميلاد 

النتيجة :

لاحظ كيف تم وضع إطار حول المعلومات



وبهذا نكون باذن الله تكلمنا على كل شيء في مجال النماذج وضمن حدود xhtml
و أرجو الله تعالى أن أكون قد وفقت في الشرح

الوظيفة :

عمل صفحة انترنت لإظهار ما يشبه نموذج التسجيل في المنتدى
و أريد أن يضع كل من يرغب المشاركة الكود الخاص به
بحيث إذا تم وضعه في صفحة محرر الأكواد يظهر ما يلي:









بالنسبة لنوع الخط و تنسيقه ليس مهم
وكل الباقي تستطيعون عمله بنفس الشكل تماماً
ويمكنكم الرجوع لصفحة التسجيل في المنتدى لعرض المطلوب بشكل أوضح
علماً أنكم قد تحتاجون للجدوال حتى إتمام العمل و الباقي مما ورد في هذا الدرس

وختاماً : أظن أني أثقلت عليكم في هذا الدرس
فإن رغبتم أجعل الدروس أقصر أي أجزئ الدروس الطويلة على عدة أجزاء
يمكنكم إبداء رأيكم في المشاركات أو الرسائل الخاصة هو عرض الدروس