THE Professional
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا
ادارة منتدي THE Professional


 
الرئيسيةاليوميةس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول


 
  
 




   
       
       
   
   
       

       
   

       
       
   

       
 

         
       




     



  •    
       
        تذكرني؟   




       
 





                     

أقسام المساعدة
منتدى المحترف يدعم : 

قسم المساعدة

مع التحية -- الإدارة :
المواضيع الأكثر نشاطاً
بحث عن كيفية
كيفية تغيير لون الفيس بوك !!
أسئلة دينية مدهشة !! رائعة و أجوبتها
تحميل Camtasia Studio 8
كيف يمكنك انشاء موقع جديد احترافي !!
نكت جزائرية تاع ضحك
موقع جوجل لاختصار الروابط
تحميل لعبة GTA Vice City !!
الأخلاق في الاسلام
طريقة معرفة عمر حاسوبك
المواضيع الأخيرة
» الابداع العربي فخر المنتديات العربيه ( تصميمك مجانا )www.ibda3araby.com
السبت مارس 14 2015, 17:43 من طرف انا حر

» تقنية جديدة خاصة بالصور الشخصية
الأربعاء مارس 12 2014, 19:08 من طرف Admin

» خبر : مدونة المحترف للإعلاميــات
الإثنين فبراير 17 2014, 15:04 من طرف Admin

»  شعيب عليه السلام
الإثنين فبراير 17 2014, 14:56 من طرف Admin

» احاديث نبويــ شريفة ـــة
الإثنين فبراير 17 2014, 14:54 من طرف Admin

» قصة سيدنا لوط عليه السلام (فيديو)
الإثنين فبراير 17 2014, 14:54 من طرف Admin

» عصا سيدنا موسى (فيديو)
الإثنين فبراير 17 2014, 14:53 من طرف Admin

» كيف اقتبس مقطع من فيديو ؟؟؟؟؟؟
الإثنين فبراير 17 2014, 14:53 من طرف Admin

» موضوع هام
الإثنين فبراير 17 2014, 14:52 من طرف Admin

المواضيع الأكثر شعبية
أجمل صور البحار في العالم §!
صور بي ام دابليو روعة BMW M6
تحضير نص الكتاب الالكتروني
تحميل لعبة GTA Vice City !!
تحضير وحدة المخدرات للسنة الثانية متوسط
تحضير نص الأجهزة التعليمية
نكت جزائرية تاع ضحك
أسئلة دينية مدهشة !! رائعة و أجوبتها
شعيب عليه السلام
تحميل Camtasia Studio 8
أفضل 10 فاتحي مواضيع
Admin
 
Youssef Madrid
 
Karima
 
adda
 
سر الجزائر
 
Mohamed Ali
 
Amine Madridi
 
younes chetouane
 
dentistemen
 
hadile
 







شاطر | 
 

 الدرس الخامس عشر في HTML : النماذج (2)

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
Admin
Admin
avatar


عدد المساهمات : 189
نقاط التميز : 8085
السٌّمعَة : 3
تاريخ التسجيل : 11/01/2014
العمر : 26
الموقع : http://theprofessional.forumalgerie.net

مُساهمةموضوع: الدرس الخامس عشر في HTML : النماذج (2)   الجمعة يناير 24 2014, 14:11

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

 Sindbad 3.0
 Sindbad 4.0
 Ms Explorer 3.0
 Ms Explorer 4.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>

 Sindbad 3.0 
 Sindbad 4.0
 MS Explorer 3.0
 MS Explorer 4.0


وهناك خاصية تتعلق بهذا النوع من الحقول، وهي أنك إذا أردت أن يظهر أحدها وقد تم اختياره بشكل تلقائي فعليك بإضافة الخاصية 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>

 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 يمكن اختيار حقل واحد فقط ليس أكثر. 
لنقم الآن بتعريف هذه الحقول، وتسميتها بشكل مباشر ومن ثم سنعلّق عليها:
<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 فأعطيناها قيمة موحدة لجميع الحقول. وبالطبع قمنا في النهاية بكتابة الأسماء التعريفية لكل حقل.

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

في RADIO تكون أسماء الحقول موحدة والقيم مختلفة، أما في CHECKBOX فتكون الأسماء مختلفة والقيم موحدة
كيف ستصل البيانات؟ حسناً لنفرض أنه تم اختيار الحقلين الثاني والرابع فسوف تصلك النتيجة بالشكل التالي:
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>

 Sindbad 3.0 
 Sindbad 4.0 
 MS Explorer 3.0 
 MS Explorer 4.0 





النوع الثالث من أشكال الإختيار من متعدد هو قوائم الاختيار، وهذا النوع سوف يقودنا إلى وسوم جديدة من وسوم التعريف والتي ستستخدم بدلاً من <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>
وبذلك تكون النتيجة هي:
      Sindbad 3.0      Sindbad 4.0      MS Explorer 3.0      MS Explorer 4.0 
وكالمعتاد لا يخلو الأمر من وجود خصائص تحدد طريقة عمل هذه الوسوم. وهناك خصائص مشتركة عرفناها في الأشكال السابقة سيتم استخدامها هنا أيضاً كما يوجد خصائص جديدة تتعلق فقط بهذا الشكل من حقول البيانات. فبالنسبة لـِ <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>
      Sindbad 3.0      Sindbad 4.0      MS Explorer 3.0      MS Explorer 4.0 
وطالما بالإمكان عرض القائمة بأي ارتفاع نريد، وقد يصل إلى حد عرض جميع بيانات القائمة معاً، فإن هناك إمكانية أيضاً لجعل اختيار البيانات من هذه القائمة متعدداً وليس فقط قيمة واحدة، كيف؟؟ بإضافة الخاصية 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>
      Sindbad 3.0      Sindbad 4.0      MS Explorer 3.0      MS Explorer 4.0 
لاحظ أنه لأداء عدة اختيارات يجب أن تقوم بالضغط على المفتاح 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>
      Sindbad 3.0      Sindbad 4.0      MS Explorer 3.0      MS Explorer 4.0 



الشكل التالي من أشكال حقول البيانات يدعى 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">‎







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


الإدارة العامة 
المدير العام 









من هنا لمراسلة الإدارة لطلب كلمة سر جديدة
من هنا لـطلب أي مساعدة
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://theprofessional.forumalgerie.net
 
الدرس الخامس عشر في HTML : النماذج (2)
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» اليكم كود html لعمل غرفة شات
» حصريا اكبر موسوعة اكواد ورموز HTML خياليه تخص صفحات مجله بوابة ورئيسية منتداك
» كود وضع خلفية لصفحات Html
» الان للجميع كود وضع خلفية لصفحات هتمل html
» من شرحي الخاص ( الشامل في HTML ) في كتاب للتحميل - تعلم اللغة

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
THE Professional :: .•:*¨`*:•. ][ شروحـآت ][.•:*¨`*:•. :: لغات البرمجة HTML-
انتقل الى: