الصفحة الرئيسية
الصفحة الرئيسيه المرجع الكامل كتب وبرامج مجانية المنتدي  مواقع هامه

النماذج الأساسيه

سنتحدث الآن أعزائي عن النماذج وكيفية تضمينها في صفحات الويب.

فهرس الصفحة

[ مقدمة | ACTION  | METHOD | ENCTYPE | INPUT ]

مقدمة

لا تكمن صعوبة التعامل مع النماذج في كونها معقدة بحد ذاتها، كلا ... فهي إحدى العناصر التي تدعمها لغة HTML وهي مجرد وسوم عادية مثلها مثل الوسوم التي تعاملنا معها في جميع الدروس السابقة. وبإمكانك إنشاء النماذج في موقعك بنفس السهولة التي تدرج فيها جدولاً أو إطاراً (هذا بالطبع إذا كنت تعتقد أن الجداول والإطارات سهلة) لكن التداخل بينها (وأعني النماذج) وبين لغات البرمجة المتقدمة في الويب مثل JavaScript, CGI هي ما يجعلها تختلف عن سابقيها من الوسوم أو العناصر الأخرى. خاصة إذا احتجت إلى بعض المقاطع البرمجية من هذه اللغات ضمن نماذجك. أما إذا اكتفيت بالإمكانات المتواضعة التي توفرها HTML بالنسبة للنماذج. فما من مشكلة... لأنه سيكون بإمكانك التعامل معها بكل بساطة. وفي هذا الدرس لن نتطرق بالطبع إلى أي من اللغات سوى HTML.


إن الوسم الأساسي للنماذج والتي يجب أن يدرج جميع الوسوم الأخرى المتعلقة بالنماذج داخل هذين الوسمين :-

<FORM> ... <‎/FORM>

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

ACTION

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

<FORM ACTION="mailto:someone@domain.com"> ... <‎/FORM>
<FORM ACTION="name_and_address_of_CGI_script"> ... <‎/FORM>

METHOD

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

<FORM ACTION="mailto:someone@domain.com" METHOD="post"> ... <‎/FORM>
<FORM ACTION="name_and_address_of_CGI_script" METHOD="get"> ... <‎/FORM>

ENCTYPE

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

  • application/x-www-form-urlencoded
  • text/plain

وبدون الخوض في الأسباب التقنية التي أدت إلى إيجاد هذين النوعين من طرق الترميز أو في أمور برمجية بعيدة عن موضوعنا، فإن الدافع لإستخدام أي من القيمتين هو طبيعة عملية المعالجة التي ستجرى على البيانات أو طبيعة برنامج البريد الإلكتروني الذي ستستقبل هذه البيانات من خلاله (إذا كان يدعم MIME أم لا، وهي إختصار للعبارة Multi-purpose Internet Mail Extentions وهي من المعايير السائدة في الإنترنت والتي تتعلق بنقل جميع أنواع البيانات من صوت وصورة وليس فقط النصوص من خلال البريد الإلكتروني). وما يعنينا هنا هو الفرق بين الطريقتين من حيث طريقة إرسال واستقبال البيانات. فعند استخدام text/plain ستصل البيانات بالشكل التالي:

NAME=Ahmed Salah
Address=Cairo, Egypt
Email=asdh4@yahoo.com

(الكلمات Name, Address, Email هي أسماء الحقول في النموذج ونقوم نحن بتعريفها أثناء عملية تصميم النموذج أما النصوص الظاهرة بعد إشارة المساواة فهي البيانات المدخلة، وسوف نتحدث عن تعريف أسماء الحقول بعد قليل)

أما عند استخدام application/x-www-form-urlencoded فستصل البيانات بالشكل:

NAME=Ahmed+Salah&Address=Cairo+,+Egypt&Email=asdh4@yahoo.com

ولك أن تخيل مبلغ الصعوبة في تحليلها إذا احتوت على عشرات الحقول. لذلك تتوفر برامج خاصة تعرف بـِ Formaters تقوم بإعادة ترتيب البيانات المرسلة من خلال النماذج بشكل مفهوم بحيث تصبح كما لو كانت مرسلة بترميز text/plain وإليك أحدها وهو برنامج مجاني يدعى UrlCook. لكن لا تعتقد أن الطريقة الأولى هي الأفضل دائماً فذلك يعتمد كما قلنا على طريقة المعالجة والنقل بالبريد. لذلك لا ضير من أن تجرب الطريقتين لتعرف أيهما أنسب لك.

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

‎<FORM ACTION="mailto:email@domain.com" METHOD="post" ENCTYPE="text/plain">... <‎/FORM>

وبهذا نكون قد إنتهينا من عملية تعريف النموذج وخصائصه، لكن انتظر فما زلنا في بداية الطريق.


INPUT

نبدأ الآن في عملية تعريف أشكال البيانات في النموذج. ونستخدم الوسم <INPUT> لتعريفها والحقيقة أن هذه الأشكال هي مجرد خصائص أو بالأحرى قيم لخصائص تابعة لهذا الوسم. كيف؟ ... لنأخذ مثالاً على ذلك لأوضح لك هذا المفهوم

حسناً، لقد استخدمت الوسم <INPUT> لتعريف هذا الشكل (هذه إتفقنا عليها مسبقاً) ومن ثم قمت بإضافة الخاصية TYPE لهذا الوسم لتحديد نوع الشكل الذي أريده وأعطيتها القيمة TEXT أي

<FORM ...‎>
<INPUT TYPE="text">‎
<‎/‎FORM>

ملخص سريع
إ
ليك جميع الأشكال (القيم) المستخدمة مع الخاصية TYPE وسوف أتركها الآن بدون تعليق لحين مناقشها لاحقاً بشكل مفصل. مع ملاحظة أن هناك شكلين آخرين ندرجهما بالوسوم
<SELECT>, <TEXTAREA>

الوسم النتيجه

<INPUT TYPE="text">‎

<INPUT TYPE="password">

<INPUT TYPE="hidden">‎

<INPUT TYPE="radio">‎

<INPUT TYPE="checkbox">‎

<INPUT TYPE="submit">‎

<INPUT TYPE="reset">‎

<INPUT TYPE="button">‎

أرجو أن أكون قد وضحت لك الآن وظيفة الخاصية TYPE وجميع القيم المستخدمة معها
ونعود الآن إلى مثالنا.. الخاصية الثانية المستخدمة مع <INPUT> هي NAME وتستخدم لتسمية حقل البيانات حيث قمت بإعطاء الإسم address لهذا الحقل في المثال. (لك كل الحرية في إعطاء الإسم الذي تريده للحقل). والحقيقة أن هذا الإسم يعرّف الحقل في داخل النموذج نفسه، بحيث يمكن استخدامه فيما بعد للحاجات البرمجية وضرورات المعالجة إن وجدت من قبل البرامج التي قد تضيفها كمصمم للموقع. وحتى عندما تريد أن يُرسل النموذج إليك بالبريد فإن حقوله تعرّف بالاسم الذي أدرجته لها من خلال هذه الخاصية. (لاحظ ما قلتُه سابقاً عن تعريف أسماء الحقول عندما تحدثنا عن الترميز والطرق التي تصل بها محتويات النموذج).إليك هذا المثال

Please enter your address :

العبارة Please enter your address : فهي مجرد عبارة توضيحية أضفتها ليعرف الزائر ما الذي يجب عليه كتابته وتستطيع صياغة هذه العبارة كما تريد. ففي كل الأحوال ليس لها علاقة بجوهر النموذج نفسه بعكس الخاصية NAME.

‎<FORM ...>‎
Please enter your address : ‎<INPUT TYPE="text" NAME="address">‎
<‎/‎FORM>

أما بالنسبة للعبارة الظاهرة داخل الحقل Cairo, Egypt (أو أي عبارة أخرى تريدها) وهي بمثابة القيمة الإفتراضية التي تريدها للحقل، فبالإمكان إظهارها من خلال الخاصية VALUE. وهذه الخاصية تستخدم في الحالات التي نتوقع فيها كتابة قيمة دارجة أو متكررة من قبل معظم الزوار وللتسهيل عليهم يتم تعيينها كقيمة إفتراضية وبالطبع مع توفر إمكانية حذفها وكتابة ما يريدنه بدلاً منها.

‎<FORM ...>‎
Please enter your address : ‎<INPUT TYPE="text" NAME="address" VALUE="Cairo, Egypt">‎
<‎/‎FORM>

قد نحتاج أحياناً إلى تحديد حجم الحقل ولذلك نستخدم الخاصية SIZE مع الرقم الذي نريده كحجم للحقل، لنجرب الرقم 40

‎<FORM ...>‎
Please enter your address : ‎<INPUT TYPE="text" NAME="address" VALUE="Nablus, Palestine" SIZE="40">‎
<‎/‎FORM>

Please enter your address :

أو لنجرب الرقم 10 أيضاً

Please enter your address :

لا يوجد للخاصية SIZE أي صفة تحكمية بالنسبة لحجم المدخلات التي يمكن للزائر أن يكتبها داخل الحقل. وبعبارة أخرى: صحيح أننا حددنا حجم الحقل لكن ذلك يسري فقط على مظهره على الشاشة. ولا يوجد ما يمنع الزائر من الكتابة بحيث يتجاوز النص حجم الحقل المحدد. وهنا يأتي دور الخاصية MAXLENGTH لتتحكم بالحد الأقصى للنص المدخل.

‎<FORM ...>‎
Please enter your address : ‎<INPUT TYPE="text" NAME="address" VALUE="Nablus, Palestine"‎
SIZE="40" MAXLENGTH="30">‎
<‎/‎FORM>

Please enter your address :

حاول الكتابة في هذا الحقل لأكثر من 30 حرفاً وأنظر ماذا سيحدث?


النوع الثاني من الحقول المستخدمة في النماذج هو حقل password وهو يشبه الحقل text من حيث الخصائص تماماً غير أن مدخلاته تظهر على شكل ****** مهما كانت، وهو الفرق الوحيد بينهما. وربما تكون قد استنتجت الآن أن هذا النوع من الحقول يستخدم عندما يوجد حاجة لإدخال كلمة سر من قبل الزائر في النموذج

‎<FORM ...>‎
Please enter your name :
‎<INPUT TYPE="text" NAME="the name" SIZE="40" MAXLENGTH="30">‎
Please enter your passwod :
‎<INPUT TYPE="password" NAME="the password" SIZE="40" MAXLENGTH="30">‎
<‎/‎FORM>

Please enter your name :      
Please enter your password :

لاحظ أنني لم أرغب في كتابة قيم إفتراضية VALUES للحقول، وأنا في هذا المثال أردت أن أوضح لك عدم أهمية كتابة قيمة إفتراضية للحقول في بعض الحالات.


نأتي الآن إلى النوع الثالث من أنواع الحقول وهو hidden أي الحقل المخفي. وكما نستنتج من اسمه فهو لن يظهر ضمن النموذج. وهذا مثال:

‎<FORM ...>‎
Please enter your name :
‎<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40" MAXLENGTH="30">‎
 ‎<INPUT TYPE="hidden" NAME="my forms" VALUE="form1">‎
 Please enter your passwod :
‎<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40" MAXLENGTH="30">‎
<‎/‎FORM>

Please enter your name :     
Please enter your passwod :

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

في النموذج الأول ...

‎<INPUT TYPE="hidden" NAME="my forms" VALUE="form1">‎

في النموذج الثاني ...

‎<INPUT TYPE="hidden" NAME="my forms" VALUE="form2">‎

في النموذج الثالث ...

‎<INPUT TYPE="hidden" NAME="my forms" VALUE="form3">‎

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

my forms=form1 أو
my forms=form2 أو
my forms=form3

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

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

الدرس التالي»»»

< الصفحة الرئيسيه | المرجع الكامل | فهرس النماذج >

 

المصدر العربي التعليمي للـHTML

¤  المحتويات 

البدايه هنا
أبدأ هنا ·
دروس سريعة للمبتدئين ·

الدروس المتخصصه
النص ·
الصور ·
الجداول ·
الأطر ·
النماذج ·

 

فهرس النماذج  ¤

> تابع النماذج الأساسيه

> تنسيق النماذج

> صورة للزر Submit

 

¤  Html4Arab صندوق الأدوات 

> إبحث في الموقع  Search


Html4Arab بحث المصدر العربي التعليمي لل HTML يأتيكم من [Atomz.com] بحث متقدم

أشترك في القائمة البريدية
لتحصل علي آخر آخبار
الموقع و التحديثات

أشترك إلغاء الإشتراك

> أخبر صديقك عن الموقع

هل أعجبت بموقعنا


أذن أضفنا إلي المفضله <


مستخدمين ال Netscape أضغط CTRL+D

 
" إعلانات "

 

^ أعلي^ للإعلان بالموقع اربط بموقعنا أتصل بنا

© 2002 Ahmed Salah