أهلاً وسهلاً بك إلى الدرس الخامس عشر من دروس HTML. وهو الثاني من درسين حول النماذج ( Forms ). لقد قمنا في الدرس السابق بمناقشة التاجات الأساسية للنماذج وتعلمنا كيفية إدراج النماذج في صفحات الويب. كما قمنا بمناقشة بعض أشكال إدخال البيانات في النموذج وهي Text, Password, Hidden هل تذكر كيف نقوم بتعريفها؟
سوف نتابع الآن مع مجموعة من الأشكال الخاصة بالاختيار من متعدد وهي بالمناسبة ثلاثة أنواع: Radio, Checkbox وقائمة الإختيار
نبدأ مع الشكل المسمى RADIO. ومن مسوغات استخدام هذا الشكل أن السؤال المطروح ينبغى أن يكون له إجابة واحدة فقط، أو بعبارة أخرى على الزائر أن يختار إجابة واحدة فقط.
وكمثال، لنفرض أنني أريد أن أسأل الزائر عن موقع التواصل الأجتماعي المفضل لديه لكن بدلا من أن يكون على شكل قائمة إختيار أريده أن يكون على شكل RADIO وذلك بالشكل التالي :
فكيف ننشيء مثل هذه القائمة؟ ... حسناً، لنبدأ من الصفر ونعرّف نموذجاً
<FORM>
</FORM>
ثم لنقم بتعريف هذا الشكل، هل تذكر التاج الخاص بذلك؟ إنه <INPUT>
<FORM>
<INPUT TYPE="radio">
</FORM>
لكن بما أن هناك أربعة مدخلات، إذن نحتاج إلى أربعة تاجات
<FORM>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
</FORM>
نحتاج الآن إلى تسمية هذه المدخلات، أي أننا سنستخدم الخاصية NAME معها. أما الاسم المعطى بحد ذاته فمن الأفضل أن يكون مرتبطاً نوعاً ما بموضوع السؤال، ليس لأن هذا ضروري للنموذج بل هو ضروري لك كشخص سيقوم باستقبال البيانات المرسلة من خلال النموذج، وبالتالي من الأفضل أن يوجد عنوان معبّر للبيانات بغرض التمييز. وبما أننا هنا نتحدث عن مواقع التواصل الإجتماعي سنسميه social-network
<FORM>
<INPUT TYPE="radio" NAME="social-network"> <BR>
<INPUT TYPE="radio" NAME="social-network"> <BR>
<INPUT TYPE="radio" NAME="social-network"> <BR>
<INPUT TYPE="radio" NAME="social-network"> <BR>
</FORM>
وكما تلاحظ من النتيجة أن هذه التسمية هي ضمنية فقط ولا تؤثر على شكل النموذج لكن أي إختيار سيقوم به الزائر من هذه الأربعة خيارات سوف يصلك تحت الاسم social-network.
الخطوة التالية هي إعطاء قيمة لكل مدخلة في هذه القائمة وذلك حسب ما نراه مناسباً، إذن حان الوقت لاستخدام الخاصية VALUE:
<FORM>
<INPUT TYPE="radio" NAME="social-network" VALUE="FaceBook"> <BR>
<INPUT TYPE="radio" NAME="social-network" VALUE="Twitter"> <BR>
<INPUT TYPE="radio" NAME="social-network" VALUE="Linkedin"> <BR>
<INPUT TYPE="radio" NAME="social-network" VALUE="Youtube"> <BR>
</FORM>
وهنا أيضا نلاحظ أن لا تغيّر في شكل النموذج ظاهرياً مع إضافة هذه الخاصية. لكن مع ذلك فقد قمنا حتى الآن بتسمية الحقول وإعطاء كل حقل قيمة محددة. وفعلياً لقد إنتهينا من هذا النموذج. لكن بالطبع نحن لا نتوقع أن يكون الزائر عالماً بالغيب لكي يخمن أي من هذه الحقول تختص بكل قيمة. لذلك بقى علينا تعريف كل حقل باسم صريح يوضح محتواه.
<FORM>
<INPUT TYPE="radio" NAME="social-network" VALUE="FaceBook"> FaceBook <BR>
<INPUT TYPE="radio" NAME="social-network" VALUE="Twitter"> Twitter <BR>
<INPUT TYPE="radio" NAME="social-network" VALUE="Linkedin"> Linkedin <BR>
<INPUT TYPE="radio" NAME="social-network" VALUE="Youtube">Youtube <BR>
</FORM>
وهناك خاصية تتعلق بهذا النوع من الحقول، وهي أنك إذا أردت أن يظهر أحدها وقد تم اختياره بشكل تلقائي فعليك بإضافة الخاصية CHECKED إليه، مع ترك كل الحرية للزائر في اختيار ما يريده فيما بعد.
<FORM>
<INPUT TYPE="radio" NAME="social-network" VALUE="FaceBook"> FaceBook <BR>
<INPUT TYPE="radio" NAME="social-network" VALUE="Twitter" CHECKED> Twitter <BR>
<INPUT TYPE="radio" NAME="social-network" VALUE="Linkedin"> Linkedin <BR>
<INPUT TYPE="radio" NAME="social-network" VALUE="Youtube">Youtube <BR>
</FORM>
وأخيراً... أود أن أوضح لك الصورة التي يصلك بها النموذج عند اختيار أحد حقوله (ولنفترض أنه الخيار الثالث). وهي بالشكل التالي:
social-network=Linkedin
نأتي الآن إلى الشكل الثاني من أشكال الإختيار من متعدد والذي يدعى CHECKBOX. ظاهرياً لا يختلف هذا الشكل عن الشكل الذي سبقه، لكن عملياً هناك اختلافات جذرية من حيث المفهوم والتعريف. وأنا أفضّل أن نبقى على استخدامنا للمثال السابق حتى يسهل علينا تمييز الفروق.
قبل أن نستمر قم بالنقر على أكثر من حقل في القائمة السابقة وأنظر ماذا سيحدث؟ إن باستطاعتك اختيار أكثر من حقل في نفس الوقت! وهذا هو الفرق الأول بين CHECKBOX و RADIO ففي RADIO يمكن اختيار حقل واحد فقط ليس أكثر.
لنقم الآن بتعريف هذه الحقول، وتسميتها بشكل مباشر ومن ثم سنعلّق عليها:
<FORM>
<INPUT TYPE="checkbox" NAME="FaceBook" VALUE="Yes"> FaceBook <BR>
<INPUT TYPE="checkbox" NAME="Twitter" VALUE="Yes"> Twitter <BR>
<INPUT TYPE="checkbox" NAME="Linkedin" VALUE="Yes"> Linkedin <BR>
<INPUT TYPE="checkbox" NAME="Youtube" VALUE="Yes"> Youtube <BR>
</FORM>
ماذا تلاحظ؟ أولاً لقد أسندنا القيمة checkbox للخاصية TYPE. ثم أعطينا لكل حقل في القائمة إسماً مميزاً في الخاصية NAME يختلف عن باقي الحقول. أما الخاصية VALUE فأعطيناها قيمة موحدة لجميع الحقول. وبالطبع قمنا في النهاية بكتابة الأسماء التعريفية لكل حقل.
في RADIO نستطيع اختيار حقل واحد فقط أما في CHECKBOX فنختار أكثر من حقل، لذلك يستخدم عادة في الحالات التي يحتمل أن نحصل فيها على عدة أجوبة لنفس السؤال.
في RADIO تكون أسماء الحقول موحدة والقيم مختلفة، أما في CHECKBOX فتكون الأسماء مختلفة والقيم موحدة |
|
|
كيف ستصل البيانات؟ حسناً لنفرض أنه تم اختيار الحقلين الثاني والرابع فسوف تصلك النتيجة بالشكل التالي:
Twitter=Yes
Youtube=Yes
كما نستطيع أيضاً تعليم بعض الحقول بصورة تلقائية كما فعلنا مع RADIO باستخدام نفس الخاصية CHECKED
<FORM>
<INPUT TYPE="checkbox" NAME="FaceBook" VALUE="Yes" CHECKED>
FaceBook <BR>
<INPUT TYPE="checkbox" NAME="Twitter" VALUE="Yes"> Twitter <BR>
<INPUT TYPE="checkbox" NAME="Linkedin" VALUE="Yes" CHECKED>
Linkedin <BR>
<INPUT TYPE="checkbox" NAME="Youtube" VALUE="Yes"> Youtube <BR>
</FORM>
|
النوع الثالث من أشكال الإختيار من متعدد هو قوائم الاختيار، وهذا النوع سوف يقودنا إلى تاجات جديدة من تاجات التعريف والتي ستستخدم بدلاً من <INPUT> وهي
<SELECT>
<OPTION>
<OPTION>
<OPTION>
.....
.....
</SELECT>
بحيث أن <SELECT> ... </SELECT> تحددان بداية ونهاية القائمة، والتاج <OPTION> الذي يوضع دائما بينهما يستخدم لتحديد كل عنصر من عناصر القائمة. لنعد إلى مثالنا السابق لنرى كيف يمكن وضع الخيارات في قائمة
<FORM>
<SELECT>
<OPTION> FaceBook </OPTION>
<OPTION> Twitter </OPTION>
<OPTION> Linkedin </OPTION>
<OPTION> Youtube </OPTION>
</SELECT>
</FORM>
وبذلك تكون النتيجة هي:
وكالمعتاد لا يخلو الأمر من وجود خصائص تحدد طريقة عمل هذه التاجات. وهناك خصائص مشتركة عرفناها في الأشكال السابقة سيتم استخدامها هنا أيضاً كما يوجد خصائص جديدة تتعلق فقط بهذا الشكل من حقول البيانات. فبالنسبة لـِ <SELECT> يوجد الخاصية NAME وهي كما تعلم تحدد اسم القائمة. كما توجد الخاصية SIZE التي تحدد حجم (أو بالأحرى) ارتفاع القائمة، وبالتالي عدد البيانات الظاهرة فيها. وهي تأخذ أي قيمة عددية صحيحة.
<FORM>
<SELECT NAME="social-network" SIZE="2">
<OPTION> FaceBook </OPTION>
<OPTION> Twitter </OPTION>
<OPTION> Linkedin </OPTION>
<OPTION> Youtube </OPTION>
</SELECT>
</FORM>
وطالما بالإمكان عرض القائمة بأي ارتفاع نريد، وقد يصل إلى حد عرض جميع بيانات القائمة معاً، فإن هناك إمكانية أيضاً لجعل اختيار البيانات من هذه القائمة متعدداً وليس فقط قيمة واحدة، كيف؟؟ بإضافة الخاصية MULTIPLE. لنقم الآن بعرض جميع القيم (لدينا أربعة قيم، إذن القيمة المكتوبة مع SIZE يجب أن تكون 4)، ومن ثم لنتح المجال أمام الزائر لاختيار أكثر من قيمة واحدة في القائمة.
<FORM>
<SELECT NAME="social-network" SIZE="4" MULTIPLE>
<OPTION> FaceBook </OPTION>
<OPTION> Twitter </OPTION>
<OPTION> Linkedin </OPTION>
<OPTION> Youtube </OPTION>
</SELECT>
</FORM>
لاحظ أنه لأداء عدة اختيارات يجب أن تقوم بالضغط على المفتاح ctrl بصورة متواصلة أثناء عملية الإختيار.
أما الخصائص المستخدمة مع التاج <OPTION> فهي VALUE والتي استخدمناها من قبل وسنستخدمها الآن لإعطاء قيمة لكل حقل بيانات في القائمة. وكذلك الخاصية SELECTED والتي نكتبها مع أي <OPTION> نريد أن يظهر وقد تم اختياره بصورة تلقائية.
<FORM>
<SELECT NAME="social-network" SIZE="4" MULTIPLE>
<OPTION VALUE="FaceBook"> FaceBook </OPTION>
<OPTION VALUE="Twitter" SELECTED> Twitter </OPTION>
<OPTION VALUE="Linkedin"> Linkedin </OPTION>
<OPTION VALUE="Youtube"> Youtube </OPTION>
</SELECT>
</FORM>
الشكل التالي من أشكال حقول البيانات يدعى TEXTAREA
وهو المستخدم عادة لكتابة التعليقات الحرة في النموذج ويتم إدراجه بكتابة التاجات
<TEXTAREA> ... </TEXTAREA>
هل تستطيع تخمين الخصائص المستخدمة معه؟ بالطبع لا بد من وجود الخاصية NAME لإعطاءه اسم التعريف. لكن لا وجود للخاصية VALUE ، وبالمقابل فإن أي نص يكتب بين التاجين سيتم عرضه داخل الحقل بصورة تلقائية
<TEXTAREA NAME="comments">
Hello, please write your comments here :-)
</TEXTAREA>
كما توجد خصائص لتحديد مساحة هذا الحقل عرضاً وارتفاعاً، وهي COLS التي تحدد العرض و ROWS التي تحدد الإرتفاع
<TEXTAREA NAME="comments" COLS="30" ROWS="6">
</TEXTAREA>
أما الخاصية الأخيرة هنا فهي WRAP التي تحدد طريقة إلتفاف النص المكتوب داخل الحقل وهناك ثلاثة قيم تأخذها وهي على النحو التالي:
virtual : التي تعني أن النص سيلتف على عدة أسطر عند كتابته ولكنه سيصلك عند إرساله على شكل سطر واحد متتابع (حاول الكتابة داخل الحقول وأنظر كيفية تأثير هذه الخاصية على كل منها)
<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="virtual">
</TEXTAREA>
physical : تعني أن النص سيلتف على عدة أسطر وسيصلك أيضاً على هذا النحو عند إرساله
<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="physical">
</TEXTAREA>
off : تعني أن النص لن يلتف بصورة تلقائية على عدة أسطر لكنه على أية حال سيصلك بنفس الشكل الذي تم إدخاله به
<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="off">
</TEXTAREA>
حسناً، بافتراض أننا إنتهينا من كتابة الشيفرة الخاصة بالنموذج وننتظر من أي زائر للموقع أن يملأه، والسؤال هو كيف يمكن له أن يرسله فعلياً؟ نعود الآن إلى التاج <INPUT> وهذه المرة مع النوع submit والتي ستقوم تلقائياً بإنشاء زر سيقوم عند النقر عليه بإرسال البيانات التي تم ملؤها في النموذج.
<INPUT TYPE="submit">
لاحظ أن Submit ظاهرة على الزر وهي العبارة الإفتراضية، فإذا أردت تغييرها فعليك باستخدام الخاصية VALUE لهذا الغرض
<INPUT TYPE="submit" VALUE="Press here to send the form">
في حالة كان زوار موقعك من النوعية المترددة من الناس والذين قد يغيرون آرائهم في آخر لحظة، يمكنك أن تتيح لهم إمكانية مسح ما كتبوه في النموذج وإلغاء الأمر، وذلك باستخدام reset كنوع TYPE للتاج <INPUT> بنفس طريقة التعريف والخصائص المستخدمة مع submit.
<INPUT TYPE="reset" VALUE="Forget about it">
الشكل الأخير من أشكال البيانات في النماذج والمدرج مع التاج <INPUT> هو button والذي يقوم بإنشاء زر ضمن النموذج، وهو مرتبط بالنماذج التي تحتوي على نصوص برمجية (أو برامج مكتملة) من لغات متقدمة مثل JavaScript كونه يستخدم لتشغيل هذه البرامج وإطلاقها. وطبعاً هناك طرق معينة لربطها مع البرامج وليس هنا المجال لطرحها. لكن مبدئياً أقول إن طريقة الإدراج والتعريف هي ذاتها المستخدمة مع reset, submit.
<INPUT TYPE="button" VALUE="This is a sample button">
وأخيراً ... وصلنا الآن إلى نهاية حديثنا عن النماذج. فما رأيك؟ هل هو من المواضيع السهلة أم الصعبة؟ لا شيء سهل في بدايته. لذلك من الأفضل لك أن تحاول دائماً التدرب أولاً بأول على التاجات المشروحة، بل والعودة إلى الدروس السابقة إذا اقتضى الأمر وخاصة إذا تداخلت بعضها مع الدروس الأحدث.
إلى اللقاء ... ومع تمنياتي لك بنماذج موفقة تخلو من التعقيد..... ولا ننسي الدعاء لأهلنا في غزة الأبيه بالثبات والنصر المبين
اللهم أنصر أهلنا في غزة ... اللهم ثبتهم ... اللهم وحد صفهم وألف بين قلوبهم
اللهم أنصرهم نصراً عزيزاً مؤزراً
اللهم أهلك اليهود الملاعين
اللهم أجعل بأسهم بينهم شديد ... وأجعل تدبيرهم تدميرهم
اللهم أقذف في قلوبهم الرعب مسيرة شهر .... وأرنا بهم عجائب قدرتك يا قوي يا عزيز
آمين آمين آمين
