الدرس الثامن : النماذج forms

تستخدم النماذج في لغة الـ HTML لعمل أنواع مختلفة من الاختيارات لمدخلات المستخدم. و الوسم الأساسي للنماذج والتي يجب أن يدرج جميع الوسوم الأخرى المتعلقة بالنماذج داخل هذين الوسمين :-

<FORM> ... <‎/FORM>

و النموذج هو المساحة التي تحتوي على عنصر " form "، عنصر النموذج هو العنصر الذي يسمح للمستخدم إدخال معلومات مثل " حقل النص text fields، مساحة الكتابة textarea fields، القوائم المنسدلة drop-down menus، أزرار الراديو radio buttons، مربعات الاختيار checkboxes، و غيرها من أشكال النماذج المختلفة.

و نحتاج لتحديد بعض الخصائص التي تتعلق بطبيعة عمل النموذج. ولدينا ثلاث خصائص:

ACTION

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

<FORM ACTION="mailto:username@email.com" METHOD="post"> ... <‎/FORM>

<FORM ACTION="pagename.html" METHOD="get"> ... <‎/FORM>

METHOD

تحدد الطريقة التي سيتم بها التعامل مع العنوان المحدد في الخاصية السابقة ACTION. وهناك قيمتين لهذه الخاصية هما: GET التي تستخدم في حالة كون عملية المعالجة داخلية أي تتم داخل الخادم Server نفسه. في عندما نستخدم نموذج البحث عن كلمة في الموقع، فإن عملية المعالجة (أي البحث) تجري مباشرة في الموقع. والقيمة الثانية هي Post وتستخدم عندما تكون عملية المعالجة خارجية كأن يتم إرسال البيانات إلى عنوان بريد إلكتروني أو فى التعامل مع بيانات سرية كأرقام الحسابات البنكية أو كلمات المرور أو حفظ بيانات فى قاعدة البيانات.

<FORM ACTION="mailto:username@email.com" METHOD="post"> ... <‎/FORM>

<FORM ACTION="pagename.html" METHOD="get"> ... <‎/FORM>

ENCTYPE

هذه الخاصية تحدد طريقة الترميز التي سيتم إرسال البيانات وفقاً لها. وهي تأخذ القيمتين التاليتين: (يجب أن تكتب هذه القيم كما هي نصاً وحرفاً)

application/x-www-form-urlencoded

text/plain