الدرس الثامن : النماذج | Forms

مستوى هذا الدّرس قد تجدونه مُتقدماً قليلاً ، إنما هو على قدرٍ بالغِ من الأهمّية

لكي تتضح فكرة الفورم بشكلٍ أفضل سنتخيّل مكتبة كبيرة جداً تقوم بإعارة الكتب الكترونياً عبر موقع على الانترنت
فإذا أردت استعارة كتاب مُعين سيطلب منك أمين المكتبة رقم اشتراكك في المكتبة ورقم الكتاب الذي استعرته
وربما تاريخ الإعارة ومعلومات ثانية أخرى ..
معلوماتك ومعلومات الآلاف من زوار المكتبة كلها يتم تخزينها فيما يسمى بقـاعدة بيانات Database
ومن أجل الوُصول إلى المعلومات في قاعدة البيانات ، أو بغية التعديل عليها وتحديثها .. نحن بحاجة إلى نموذج معيّن
نقوم من خلاله بتعبئة معلومات معينة أو القيام بمهام محددة ، وهنا تأتي مهمة الـ Forms
يقوم بتوفير واجهة لتمرير المعلومات إلى قاعدة البيانات

قد يحتوي الفورم على عناصر إدخال مثل Text Fields, Radio Buttons, Check boxes
أو قوائم و labels .. الخ
هذه المُصطلحات قد تبدو جديدة قليلاً لذلك سيتم توضيحها بالأمثلة من خلال هذا الدّرس

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




وسم الـ <input> داخل الفورم يعتبر الأهم على الإطلاق
وتتنوع استخداماته بحسب ما يتم تعريفه

في هذا الدّرس سنقوم بتصميم صفحة لتعبئة معلومات مُعينة من خلال الأمثلة التي ستُطرح


مثال - 1 - : حقل نصّي | Text Fields




لنقوم بعمل حقل نصّي تُضاف له معلومات مُعينة نستخدم وسم الـ <input> بالطّريقة التّالية :



الكود :



النتيجة :





مثال - 2 - : Radio Buttons


تتميّز الـ Radio Buttons بأنها تسمح باختيار واحد فقط من ضمن الخيارات الموجودة
لذا فهي تستعمل في حالات مثل : جنس الشخص ، أو حالته الاجتماعية

الطّريقة لإنشائها كالتّالي :



مثال :



ملحوظة هامة جداً : يجب أن تكون قيمة الـ name للـ radio buttons نفس القيمة ..
بهذه الطّريقة يستطيع المُتصفّح التمييز أن هذه مجموعة واحدة من ال Radio Buttons ويُمنع اختيار أكثر من خيار منها
في حال قمنا بتسمية كل Radio button بإسم معين فإن المستخدم سيتمكن من اختيار أكثر من خيار
في نفس الوقت ، وبهذه الطريقة نكون قد أضعنا الغاية الأساسية من الـ Radio Buttons !
في المثال أعلاه أسمينا الزّرين بـ "gender" وبالتّالي لن يكون باستطاعتنا اختيار أكثر من خيار [ إما ذكر أو أنثى ]

النتيجة :





مثال - 3 - : Checkboxes


تختلف الـ Checkboxes عن الـ Radio Buttons في قدرة المستخدم على تحديد خيار واحد أو أكثر من الخيارات
الموجودة والمعروضة

النموذج العام لإنشائها :



مثال :



النتيجة :





مثال - 4 - : حقل كلمة السر | Password Field
عندما تقوم بكتابة كلمة السّر الخاصة بك للدخول إلى بسمله مثلاً
تُلاحظ أن الذي يظهر أمامك هو نجوم للحفاظ على السّرية

لعمل ذلك نستخدم التعريف التّالي :



لاحظوا :




والنتيجة :





مثال - 5 - : Text Area
يُمكننا إضافة مساحة لكتابة نص مُعين بأبعاد مُعينة ومواصفات معينة بواسطة الوسم التّالي :




مثال :




النتيجة :





مثال - 6 - : إضافة زر إعتماد | ٍSubmit Button



لإضافة زر نعتمد به التغييرات أو المعلومات التي قمنا بإضافتها نستخدم التّالي :



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

لعمل ذلك نقوم بالتّالي :



action : هو attribute يُسند إليه اسم الصّفحة التي نرغب بالانتقال إليها
هنا اسمها Index.html ..

method : نستخدمها لتعريف طريقة ارسال المعلومات عند الضغط على زر الاعتماد
[ لن نخض في هذا المجال كثيرا لأنه مُتشعب للغاية ]


الكود سيكون كالتالي فيما يتعلق بالـ form :



ولإضافة زر الاعتماد :



والنتيجة :



عند الضغط على زر Submit سيتم نقلنا إلى Index.html

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


شكل الصّفحة كاملاً :




::

التطبيق مهم في هذا الدّرس
يعطيكم الف عافية ، وبانتظاركم