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

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

لقد قمنا في الدرس السابق بمناقشة الوسوم الأساسية للنماذج وتعلمنا كيفية إدراج النماذج في صفحات الويب. كما قمنا بمناقشة بعض أشكال إدخال البيانات في النموذج وهي Text, Password, Hidden هل تذكر كيف نقوم بتعريفها؟ راجع الدرس السابق إن أردت المزيد من التوضيح

فهرس الصفحة

[ RADIO | CHECKBOX | Drop-down Select Boxes ]

أسوف نتابع الآن مع مجموعة من الأشكال الخاصة بالاختيار من متعدد وهي بالمناسبة ثلاثة أنواع: Radio, Checkbox وDrop-down Select Boxes

RADIO

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

<input type="radio">

وكمثال، لنفرض أنني أريد أن أسأل الزائر عن اللون المفضل لديه لكن بدلا من أن يكون على شكل قائمة إختيار أريده أن يكون على شكل RADIO وذلك بالشكل التالي

الأخضر الأسود الأزرق الأحمر
 

فكيف ننشيء مثل هذه القائمة؟ هذا هو وسم هذه القائمة

<form>
<input name="color" type="radio" value="Green">الأخضر
<input name="color" type="radio" value="black">الأسود
<input name="color" type="radio" value="blue">الأزرق
<input name="color" type="radio" value="red">الأحمر
</form>

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

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

<form>
<input name="color" type="radio" value="Green" CHECKED>الأخضر
<input name="color" type="radio" value="black">الأسود
<input name="color" type="radio" value="blue">الأزرق
<input name="color" type="radio" value="red">الأحمر
</form>

الأخضر الأسود الأزرق الأحمر

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

Color=blue


CHECKBOX

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

<input type="checkbox">

وكمثال، لنفرض أنني أريد أن أسأل الزائر عن البرامج المفضله لديه :

All ACDSee Photoshop

Winamp

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

<input type="checkbox" name="ws" value="yes">Winamp
<input type="checkbox" name="ps" value="yes">Photoshop
<input type="checkbox" name="acd" value="yes">ACDSee
<input type="checkbox" name="all" value="yes">All

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

هام جدا في RADIO نستطيع اختيار حقل واحد فقط أما في CHECKBOX فنختار أكثر من حقل، لذلك يستخدم عادة في الحالات التي يحتمل أن نحصل فيها على عدة أجوبة لنفس السؤال. في RADIO تكون أسماء الحقول موحدة والقيم مختلفة، أما في CHECKBOX فتكون الأسماء مختلفة والقيم موحدة

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

ps=Yes
all=Yes

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

<input type="checkbox" name="ws" value="yes" CHECKED>Winamp
<input type="checkbox" name="ps" value="yes">Photoshop
<input type="checkbox" name="acd" value="yes" CHECKED>ACDSee
<input type="checkbox" name="all" value="yes">All

All ACDSee Photoshop

Winamp


Drop-down Select Boxes

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

<SELECT>
    <OPTION>
<‎/SELECT>

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

<FORM>
<SELECT>
    ‎<OPTION> Winamp
    ‎<OPTION>Photoshop
    ‎<OPTION> ACDSee
    ‎<OPTION> All
<‎/SELECT>
<‎/FORM>

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

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

‎ <FORM>
<SELECT NAME="browser" SIZE="2">‎
    ‎<OPTION> Winamp
    ‎<OPTION>Photoshop
    ‎<OPTION> ACDSee
    ‎<OPTION> All
<‎/SELECT>
<‎/FORM

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

 <FORM>
<SELECT NAME="browser" SIZE="4" MULTIPLE>‎
    ‎<OPTION> Winamp
    ‎<OPTION>Photoshop
    ‎<OPTION> ACDSee
    ‎<OPTION> All
<‎/SELECT>
<‎/FORM

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

<FORM>
<SELECT NAME="browser" SIZE="4" MULTIPLE>
    ‎<OPTION VALUE="wa"> Winamp
    ‎<OPTION VALUE="ps" SELECTED>Photoshop
    ‎<OPTION VALUE="acd"> ACDSee
    ‎<OPTION VALUE="all"> All
<‎/SELECT>
<‎/FORM>


الشكل التالي من أشكال حقول البيانات يدعى TEXTAREA

وهو المستخدم عادة لكتابة التعليقات الحرة في النموذج ويتم إدراجه بكتابة الوسوم

<TEXTAREA> ... <‎/TEXTAREA>

هل تستطيع تخمين الخصائص المستخدمة معه؟ بالطبع لا بد من وجود الخاصية NAME لإعطاءه اسم التعريف. لكن لا وجود للخاصية VALUE ، وبالمقابل فإن أي نص يكتب بين الوسمين سيتم عرضه داخل الحقل بصورة تلقائية

‎<TEXTAREA NAME="comments">‎
‎أهلا بك من فضلك ضع تعليقك هنا :)
<‎/TEXTAREA>

كما توجد خصائص لتحديد مساحة هذا الحقل عرضاً وارتفاعاً، وهي COLS التي تحدد العرض و ROWS التي تحدد الإرتفاع

<TEXTAREA NAME="comments" COLS="30" ROWS="6">‎
<‎/TEXTAREA>

أما الخاصية الأخيرة هنا فهي WRAP التي تحدد طريقة إلتفاف النص المكتوب داخل الحقل وهناك ثلاثة قيم تأخذها وهي على النحو التالي:

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="من فضلك أرسل لي">‎

ي حالة كان زوار موقعك من النوعية المترددة من الناس والذين قد يغيرون آرائهم في آخر لحظة، يمكنك أن تتيح لهم إمكانية مسح ما كتبوه في النموذج وإلغاء الأمر، وذلك باستخدام reset كنوع TYPE للوسم <INPUT> بنفس طريقة التعريف والخصائص المستخدمة مع submit.

<INPUT TYPE="reset" VALUE="أمسح الحقول">‎

الشكل الأخير من أشكال البيانات في النماذج والمدرج مع الوسم <INPUT> هو button والذي يقوم بإنشاء زر ضمن النموذج، وهو مرتبط بالنماذج التي تحتوي على نصوص برمجية (أو برامج مكتملة) من لغات متقدمة مثل JavaScript كونه يستخدم لتشغيل هذه البرامج وإطلاقها. وطبعاً هناك طرق معينة لربطها مع البرامج وليس هنا المجال لطرحها. لكن مبدئياً أقول إن طريقة الإدراج والتعريف هي ذاتها المستخدمة مع reset, submit.

<INPUT TYPE="button" VALUE="هذا مثال للزر أو button">‎

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

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

 

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

¤  المحتويات 

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

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

 

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

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

> صورة للزر Submit

 

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

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


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


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

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

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

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


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


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

 
" إعلانات "

 

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

© 2002 Ahmed Salah