شرح دوره الـ JavaScript للمبتدئين - الدرس العشرون

من اكثر الاستخدامات شيوعا للنماذج (forms) هو القدره على استرداد البيانات من المستخدم فى النموذج.

form control

وتتكون من :

1. button : هذا الـ button يختلف عن (submit button , reset button )
2. checkbox : عباره عن خانه يتم من خلالها اختيار شئ معين.
3. password  : هو عباره عن مربع نصى (text box) يعرض فيه النص على هيئه نجوم لكى يخفى ما يدخله المستخدم عن الباقى.
4. radio : عباره عن زرار لاختيار خيار واحد فقط من الخيارات المتاحه.
5. reset : عباره عن زرار لاعاده ضبط أو تقييم البيانات.
6. select : عباره عن قائمه يتم اختيار منها خيار واحد أو اكثر.
7. submit : عباره عن زرار يستخدم لارسال البيانات
8. text : عباره عن مربع يستخدمه المستخدم لادخال بيانات معينه
9. textarea  : يعتبر مثل text ولكن هذا يمكنه اضافه المسطرة فى حاله ادخل المستخدم بيانات كثيره.

ملحــــوظه

لابد من ملاحظه انه فى حاله استخدام form control  لابد من استخدام form tag كالشكل التالى:

<form> ...............</form>

مثال توضيحى

<form   name ="myForm" >
<input  type = "text"  name ="firstName" >
</form>

form object

تعتبر تمثيل للـ form  فى لغه html , ويمكننا الاشاره إلى form object باستخدام طريقتين :

1. بواسطه اسم form

مثال توضيحى
للاشاره إلى القيمه الموجوده داخل text فى المثال السابق يكتب التالى :

document . myForm . firstName . value; 

     2.  بواسطه index (أى بواسطه ترتيب هذه الـ form  فى form element array حيث يبدأ الترتيب من الصفر)

مثال توضيحى 

باعتبار ان الـ form الموجوده فى المثال الاول هى أول form  موجوده ويعتبر text هو اول عنصر فى form يكتب الكود كالتالى:

document . forms[0] . elements[0] . value;

ملحــوظه

يمكننا استخدام الطريقتين معا كالتالى:

document . forms[0] . firstName . value;

*******************************************

button object

يعتبر الـ object الاكثر بساطه  ,ويعتبر معالج الحدث (event handler) الاساسى له هو onClick
الشكل العام له هو:

<input  type = "button"  value = "text on button"  onClick = "script to execute" >

ويحتوى هذا object على خصائص properties , ومعاالج الحدث  event handler والجدول التالى يوضحهم

تغيير النص المكتوب على button كالتالى:

document . formName . buttonName , value = "new value" ;

مثــــــــــــال

لاستخدام الكود السابق يجب ازاله وسوم التعليق --!> ,  <--  من البدايه ,ومن النهايه

********************************************

checkbox object

يكون فى شكل مربع صغير حيث يتم اختياره بالضغط عليه (check on or off)
الشكل العام له هو:

<input  type = ''checkbox"  value = "valueToReturnIfChecked" > caption text

caption text : هو عباره عن النص الذى يكون بجانب checkbox

بعض الخصائص ومعالج الحدث الخاص بـ checkbox

مثــــــــال

لاستخدام الكود السابق يجب ازاله وسوم التعليق --!> ,  <--  من البدايه ,ومن النهايه

ملحــوظه

تم استخدام this فى هذا الكود حيث انها تدل على اسم checkbox وهو myCheck , اى يمكننا استخدام اى من الكلمتين هنا .

عند تنفيذ الكود سوف يظهر الاتى:

وعند الضغط على checkbox الاولى ليصبح به علامه صح تظهر النافذه التاليه

وعند الضغط على ckeckbox الثانيه ليصبح بها علامه صح سيظهرالاتى:

وعند الضغط على checkbox الثانيه لازاله علامه صح سيظهر الاتى :