Sign In Sign-Up

Welcome!

Close

Would you like to make this site your homepage? It's fast and easy...

Yes, Please make this my home page!

No Thanks

  Don't show this to me again.

Close

أمثلة

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

لا تكمن صعوبة التعامل مع النماذج في كونها معقدة بحد ذاتها، كلا ... فهي إحدى العناصر التي تدعمها لغة 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=Yahya Al-Sharif
Address=Nablus , Palestine
Email=yahya@palnet.com

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

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

NAME=Yahya+Al-Sharif&Address=Nablus+,+Palestine&Email=yahya@palnet.com

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

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

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

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

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

ملاحظة: إذا كنت تستخدم Sindbad 3.x فسيبدو الحقل والنص المجاور له بصورة معكوسة، وهي مشكلة ناتجة عن برنامج Netscape الذي يعمل من خلاله

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

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

لينتج لدينا هذا الشكل:

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

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

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

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

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

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

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

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

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

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

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

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

إنتهينا الآن من خصائص الوسم INPUT فما رأيك بإجمالها مرة أخرى؟ حسناً، هذه هي:

·        TYPE: لتحديد نوع (شكل) حقل البيانات.

·        NAME: لتعيين اسم لحقل البيانات.

·        VALUE: لتعيين قيمة إفتراضية (مبدئية) لحقل البيانات.

·        SIZE: لتحديد حجم حقل البيانات.

·        MAXLENGTH: لتعيين الحد الأقصى لعدد الحروف المدخلة في الحقل.

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

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

لاحظ أنني لم أرغب في كتابة قيم إفتراضية 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>

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

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

‎<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

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

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

‎<FORM ...>‎
‎<TABLE BORDER="0">‎
<TR>
<TD>Please enter your name : <‎/TD>
<TD>
‎<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40" MAXLENGTH="30">‎
<‎/‎TD>
<‎/TR>
 
<TR>
<TD>Please enter your password :<‎/TD>
<TD>
‎<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40" MAXLENGTH="30">‎
<‎/TD>
<‎/‎TR>
<‎/TABLE>
<‎/‎FORM>

وكما ترى تحتاج إلى القليل من العمل الإضافي لكنك بالمقابل ستحصل على النتيجة التالية

هكذا أفضل... أليس كذلك؟

سوف نتابع الآن مع مجموعة من الأشكال الخاصة بالاختيار من متعدد وهي بالمناسبة ثلاثة أنواع: Radio, Checkbox وقائمة الإختيار

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

وكمثال، لنفرض أنني أريد أن أسأل الزائر عن المتصفح الذي يستخدمه (كما هو موجود في دفتر الزوار على شكل قائمة إختيار) لكن بدلا من أن يكون على شكل قائمة إختيار أريده أن يكون على شكل RADIO وذلك بالشكل التالي:(أود أن أذكرك أن عناصر النموذج تظهر بشكل معكوس إذا كنت تستخدم Sindbad 3.0)

فكيف ننشيء مثل هذه القائمة؟ ... حسناً، لنبدأ من الصفر ونعرّف نموذجاً

<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 معها. أما الاسم المعطى بحد ذاته فمن الأفضل أن يكون مرتبطاً نوعاً ما بموضوع السؤال، ليس لأن هذا ضروري للنموذج بل هو ضروري لك كشخص سيقوم باستقبال البيانات المرسلة من خلال النموذج، وبالتالي من الأفضل أن يوجد عنوان معبّر للبيانات بغرض التمييز. وبما أننا هنا نتحدث عن المتصفحات فليكن هذا الاسم هو browser

<FORM>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<‎/FORM>

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

الخطوة التالية هي إعطاء قيمة لكل مدخلة في هذه القائمة وذلك حسب ما نراه مناسباً، إذن حان الوقت لاستخدام الخاصية VALUE:

<FORM>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4"> <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> <BR>
<‎/FORM>

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

<FORM>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> Sindbad 3.0 <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4"> Sindbad 4.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> MS Explorer 3.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> MS Explorer 4.0<BR>
<‎/FORM>

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

<FORM>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> Sindbad 3.0 <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4" CHECKED>
Sindbad 4.0‎<BR>‎
<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> MS Explorer 3.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> MS Explorer 4.0<BR>
<‎/FORM>

وأخيراً... أود أن أوضح لك الصورة التي يصلك بها النموذج عند اختيار أحد حقوله (ولنفترض أنه الخيار الثالث). وهي بالشكل التالي:

browser=Msie3

نأتي الآن إلى الشكل الثاني من أشكال الإختيار من متعدد والذي يدعى CHECKBOX. ظاهرياً لا يختلف هذا الشكل عن الشكل الذي سبقه، لكن عملياً هناك اختلافات جذرية من حيث المفهوم والتعريف. وأنا أفضّل أن نبقى على استخدامنا للمثال السابق حتى يسهل علينا تمييز الفروق.

قبل أن نستمر قم بالنقر على أكثر من حقل في القائمة السابقة وأنظر ماذا سيحدث؟ إن باستطاعتك اختيار أكثر من حقل في نفس الوقت! وهذا هو الفرق الأول بين CHECKBOX و RADIO ففي RADIO يمكن اختيار حقل واحد فقط ليس أكثر.
لنقم الآن بتعريف هذه الحقول، وتسميتها بشكل مباشر ومن ثم سنعلّق عليها:

<FORM>
<INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes"> Sindbad 3.0 <BR>
<INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes"> Sindbad 4.0 <BR>
<INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes"> MS Explorer 3.0 <BR>
<INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes"> MS Explorer 4.0 <BR>
<‎/FORM>

ماذا تلاحظ؟ أولاً لقد أسندنا القيمة checkbox للخاصية TYPE. ثم أعطينا لكل حقل في القائمة إسماً مميزاً في الخاصية NAME يختلف عن باقي الحقول. أما الخاصية VALUE فأعطيناها قيمة موحدة لجميع الحقول. وبالطبع قمنا في النهاية بكتابة الأسماء التعريفية لكل حقل.

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

Sind4=Yes
Msie4=Yes

كما نستطيع أيضاً تعليم بعض الحقول بصورة تلقائية كما فعلنا مع RADIO باستخدام نفس الخاصية CHECKED

<FORM>
<INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes" CHECKED>
Sindbad 3.0 ‎<BR>‎
<INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes"> Sindbad 4.0 <BR>
<INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes" CHECKED>
MS Explorer 3.0 ‎<BR>‎
<INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes"> MS Explorer 4.0 <BR>
<‎/FORM>

النوع الثالث من أشكال الإختيار من متعدد هو قوائم الاختيار، وهذا النوع سوف يقودنا إلى وسوم جديدة من وسوم التعريف والتي ستستخدم بدلاً من <INPUT> وهي

<SELECT>
    <OPTION>
    <OPTION>
    <OPTION>
    .....
    .....
<‎/SELECT>

بحيث أن <SELECT> ... </‎SELECT> تحددان بداية ونهاية القائمة، والوسم <OPTION> الذي يوضع دائما بينهما يستخدم لتحديد كل عنصر من عناصر القائمة. لنعد إلى مثالنا السابق لنرى كيف يمكن وضع الخيارات في قائمة

<FORM>
<SELECT>
    ‎<OPTION> Sindbad 3.0‎
    ‎<OPTION> Sindbad 4.0‎
    ‎<OPTION> MS Explorer 3.0‎
    ‎<OPTION> MS Explorer 4.0‎
<‎/SELECT>
<‎/FORM>

وبذلك تكون النتيجة هي:

وكالمعتاد لا يخلو الأمر من وجود خصائص تحدد طريقة عمل هذه الوسوم. وهناك خصائص مشتركة عرفناها في الأشكال السابقة سيتم استخدامها هنا أيضاً كما يوجد خصائص جديدة تتعلق فقط بهذا الشكل من حقول البيانات. فبالنسبة لـِ <SELECT> يوجد الخاصية NAME وهي كما تعلم تحدد اسم القائمة. كما توجد الخاصية SIZE التي تحدد حجم (أو بالأحرى) ارتفاع القائمة، وبالتالي عدد البيانات الظاهرة فيها. وهي تأخذ أي قيمة عددية صحيحة.

<FORM>
‎<SELECT NAME="browser" SIZE="2">‎
    ‎<OPTION> Sindbad 3.0‎
    ‎<OPTION> Sindbad 4.0‎
    ‎<OPTION> MS Explorer 3.0‎
    ‎<OPTION> MS Explorer 4.0‎
<‎/SELECT>
<‎/FORM>

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

<FORM>
<SELECT NAME="browser" SIZE="4" MULTIPLE>
    ‎<OPTION> Sindbad 3.0‎
    ‎<OPTION> Sindbad 4.0‎
    ‎<OPTION> MS Explorer 3.0‎
    ‎<OPTION> MS Explorer 4.0‎
<‎/SELECT>
<‎/FORM>

لاحظ أنه لأداء عدة اختيارات يجب أن تقوم بالضغط على المفتاح ctrl بصورة متواصلة أثناء عملية الإختيار.
 
أما الخصائص المستخدمة مع الوسم <OPTION> فهي VALUE والتي استخدمناها من قبل وسنستخدمها الآن لإعطاء قيمة لكل حقل بيانات في القائمة. وكذلك الخاصية SELECTED والتي نكتبها مع أي <OPTION> نريد أن يظهر وقد تم اختياره بصورة تلقائية.

<FORM>
<SELECT NAME="browser" SIZE="4" MULTIPLE>
    ‎<OPTION VALUE="Sindbad 3.0"> Sindbad 3.0‎
    ‎<OPTION VALUE="Sindbad 4.0" SELECTED> Sindbad 4.0‎
    ‎<OPTION VALUE="MS Explorer 3.0"> MS Explorer 3.0‎
    ‎<OPTION VALUE="MS Explorer 4.0"> MS Explorer 4.0‎
<‎/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 التي تحدد طريقة إلتفاف النص المكتوب داخل الحقل (لا تعمل هذه الخاصية مع MS Explorer 3.0) وهناك ثلاثة قيم تأخذها وهي على النحو التالي:

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 أو ( Submit Query في Netscape) ظاهرة على الزر وهي العبارة الإفتراضية، فإذا أردت تغييرها فعليك باستخدام الخاصية 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">‎

الوسوم الخاصة 12

هل سبق لك وأن صادفت عبارة Best Viewed with Netscape Navigator أو Best Viewed with MS Internet Explorer أو (أفضل مشاهدة بواسطة المتصفح نيتسكيب … أو إكسبلورر) عند زيارتك لبعض مواقع الإنترنت? حتماً لقد شاهدت مثل هذه العبارات تذيل الكثير من المواقع. والحقيقة أن مصممي هذه المواقع ليسوا بالضرورة من المعجبين بهذا المتصفح أو ذاك بحيث يعلنوا ولائهم له دون غيره من المتصفحات. لكن بكل بساطة ربما قاموا بتضمين بعض الوسوم أو الخصائص التي يدعمها ذلك المتصفح فقط في صفحاتهم…! بحيث إذا قام زائر ما بالدخول إلى ذلك الموقع مستخدماً متصفحاً آخر غير الموصى به فلن يشاهد نفس النتيجة التي يشاهدها زائر آخر يستخدم المتصفح المطلوب. (طبعاً لا أستطيع أن أعمم هذا لأن هناك العديد من المصممين الذين يفضلون فعلاً متصفحاً عن غيره سواءً قاموا بتضمين الوسوم الخاصة به أم لا)
 
نعم، يوجد هناك العديد من الوسوم في لغة HTML التي قامت الشركات المنتجة للمتصفحات كمايكروسوفت ونيتسكيب بتطويرها بحيث تعمل على متصفحها الخاص دون غيره من المتصفحات Browser Specific Tags (من قال لك أن الشركات الكبرى تتعامل مع بعضها البعض كالكبار). وقد يصل الأمر أحياناً إلى وجود وسوم موحدة تدعمها جميع المتصفحات لكن طريقة تنفيذ وعرض هذه الوسوم هي التي تختلف. وأذكرك بما قلناه في الدرس الرابع عند الحديث عن القوائم. فقد شاهدنا كيف أن كلا المتصفحين يدعمان الوسم <UL> والخاصية TYPE لكنهما يختلفان على القيم التي تدرج معهما. وهذا مثال واحد فقط على هذا الإختلاف.

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

فما الحل إذن؟

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

قبل أن نبدأ باستعراض الوسوم لا بد لي من التنويه بأني استخدم برنامجي Sindbad 3.x و Ms Internet Explorer 3.x وعندما أتحدث عن الوسوم والخصائص وتوافقها مع المتصفحات فأنا أعني هذين المتصفحين وأعني رقم الإصدار أيضاً (‎3.x). وذلك لأنهما لا زالا الأكثر رواجاً (حتى تاريخ كتابة هذا الدرس)، سواء بيننا كمستخدمين عرب أو بشكل عام بين مستخدمي الإنترنت عالمياً. ومن المحتمل إذا كنت تستخدم إصداراً أحدث لأحد هذه البرامج أن تلاحظ أنه قد أصبح يدعم الوسوم الخاصة بالبرنامج الآخر (وهذا بالطبع ليس ذنبي، بل ذنب أولئك الذين يطورون برامجهم بشكل دائم ومتسارع ولا يتركوننا نلتقط أنفاسنا بين كل إصدار وآخر). وعلى أية حال إذا كنت ممن يقبلون النصيحة المجانية، حاول دائماً تصميم صفحاتك مع افتراض أسوأ الإحتمالات أي واضعاً نصب عينيك أن زوار موقعك يستخدمون متصفحات قديمة. وبذلك تضمن أن معظمهم إن لم يكن جميعهم سيشاهدون موقعك بنفس الصورة وبدون أي مشاكل تتعلق بالتوافقية بين المتصفحات والوسوم.

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

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