النماذج (2) HTML

دروس HTML 0 Geek4Arab الوسوم:, ,

النماذج (2) HTML


بقلم : w3schools4arb.com
بتاريخ : 15 يناير 2013
 

النماذج (2) HTML

أهلاً وسهلاً بك إلى الدرس الخامس عشر من دروس HTML. وهو الثاني من درسين حول النماذج. لقد قمنا في الدرس السابق بمناقشة الوسوم الأساسية للنماذج وتعلمنا كيفية إدراج النماذج في صفحات الويب. كما قمنا بمناقشة بعض أشكال إدخال البيانات في النموذج وهي Text, Password, Hiddenهل تذكر كيف نقوم بتعريفها؟ راجع الدرس السابق إن أردت المزيد من التوضيح، وإلا هيا بنا نكمل ولندخل في الموضوع مباشرة.
سوف نتابع الآن مع مجموعة من الأشكال الخاصة بالاختيار من متعدد وهي بالمناسبة ثلاثة أنواع:Radio, Checkbox وقائمة الإختيار
نبدأ مع الشكل المسمى RADIO. ومن مسوغات استخدام هذا الشكل أن السؤال المطروح ينبغى أن يكون له إجابة واحدة فقط، أو بعبارة أخرى على الزائر أن يختار إجابة واحدة فقط.
وكمثال، لنفرض أنني أريد أن أسأل الزائر عن المتصفح الذي يستخدمه (كما هو موجود في دفتر الزوار على شكل قائمة إختيار) لكن بدلا من أن يكون على شكل قائمة إختيار أريده أن يكون على شكلRADIO وذلك بالشكل التالي:(أود أن أذكرك أن عناصر النموذج تظهر بشكل معكوس إذا كنت تستخدمSindbad 3.0)

Sindbad 3.0
Sindbad 4.0
Ms Explorer 3.0
Ms Explorer 4.0

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


 
<‎/FORM>
ثم لنقم بتعريف هذا الشكل، هل تذكر الوسم الخاص بذلك؟ إنه 


<‎/FORM>

لكن بما أن هناك أربعة مدخلات، إذن نحتاج إلى أربعة وسوم

<‎/FORM>

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

<‎/FORM>

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

<‎/FORM>

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

 Sindbad 3.0 

 Sindbad 4.0

 MS Explorer 3.0

 MS Explorer 4.0

<‎/FORM>

Sindbad 3.0 
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0

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

 Sindbad 3.0 

 
Sindbad 4.0‎

 MS Explorer 3.0

 MS Explorer 4.0

<‎/FORM>

Sindbad 3.0 
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0

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

Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0

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

Sindbad 3.0

Sindbad 4.0

MS Explorer 3.0

MS Explorer 4.0

<‎/FORM>
ماذا تلاحظ؟ أولاً لقد أسندنا القيمة checkbox للخاصية TYPE. ثم أعطينا لكل حقل في القائمة إسماً مميزاً في الخاصية NAME يختلف عن باقي الحقول. أما الخاصية VALUE فأعطيناها قيمة موحدة لجميع الحقول. وبالطبع قمنا في النهاية بكتابة الأسماء التعريفية لكل حقل.
في RADIO نستطيع اختيار حقل واحد فقط أما فيCHECKBOX فنختار أكثر من حقل، لذلك يستخدم عادة في الحالات التي يحتمل أن نحصل فيها على عدة أجوبة لنفس السؤال.
في RADIO تكون أسماء الحقول موحدة والقيم مختلفة، أما في CHECKBOX فتكون الأسماء مختلفة والقيم موحدة
كيف ستصل البيانات؟ حسناً لنفرض أنه تم اختيار الحقلين الثاني والرابع فسوف تصلك النتيجة بالشكل التالي:
Sind4=Yes
Msie4=Yes
كما نستطيع أيضاً تعليم بعض الحقول بصورة تلقائية كما فعلنا مع RADIO باستخدام نفس الخاصيةCHECKED


Sindbad 3.0 ‎

Sindbad 4.0


MS Explorer 3.0 ‎

MS Explorer 4.0

<‎/FORM>

Sindbad 3.0 
Sindbad 4.0 
MS Explorer 3.0 
MS Explorer 4.0

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

 

المصدر

الكاتب Geek4Arab

Geek4Arab

مواضيع متعلقة

اترك رداً