النماذج

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

وصيغته هي :

<form  action =" # "    method = " $ " >

… The input or selection form …

</form>

#: URL of CGI script (عنوان ملف أو نص واجهة التداخل المشترك).

$:  GET, Post

وهو يحدد أسلوبا طرحا وعرض النموذج فا post) ) تعني إرسال النموذجGet)) تعني استلام النموذج. 

وللنموذج عدة عناصر هي :

1)     المدخلات(input) :

صيغته:

< input     Type =" #" name = " $ " >

#: text, password, checkbox, image, radio, hidden, file, button, submit, reset.

$ : CGI اسم بسيط لاستخدامه في

كل أنواع المدخلات لها سمات خاصة بها وقد تشترك هذه السمات في نوعين من المدخلات أو أكثر ولكن تشترك جميع هذه الأنواع في  سمة الاسم إلا النوعين هما submit , reset 

و أنواع المدخلات هي :

text  لعمل مربع النص

   password   لعمل مربع نص ولكن عند إدخال النص يظهر علامة النجمة .

 لهما 3 سمات اضافيه وهي  مشتركة

1)     Value وهي لإعطاء قيمة افتراضية للعنصر ويمكن الاستغناء عنه .

2)     Size   تحدد حجم الخانة ( صندوق النص ) بعدد الأحرف التي تستوعبها .

3)     Maxlength   تحدد الحد الأقصى من الحروف التي يمكن إدخالها .

مثال :

<input type =text  name="T1" size="20" maxlength =20>

<input type= password   name="pn" size="12">

  Checkbox

 صندوق الاختيار ويمتاز بإمكانية اختيار كل العناصر من مجموعة عناصر صندوق الاختيار , وكل سطر وسم من هذا النوع ينشأ مربع خيار واحد ( عنصر واحد ) .

    Radio

  زر الاختيار ويمتاز انه يمكن اختيار عنصر واحد فقط من مجموعة عناصر أزار الاختيار , وكل سطر وسم من هذا النوع ينشأ زر خيار واحد ( عنصر واحد ) ولمجوعة العناصر يجب أن يكون لها نفس الاسم في سمة الاسم (name) بخلاف صندوق الاختيار .

ولها سمة خاصة هي (Id) وتستخدم مع الوسم ( <label> ) حيث إن قيمة هذه السمة هي اسم الوسم (<label>)

فتكون الصيغة كالتالي :

<label  for = " label name " >

< input   type = "radio"   name = " n1"   Id = " label name " >

عندما ينقر المستخدم نص  label  يقفز المؤشر إلى صندوق المدخلات المعني .

وللنوعين صندوق الاختيار و زر الاختيار سمتين إضافيتين وهي مشتركة هما :

1)     Value   وهي اختيارية  وتستخدم في الغالب لإرجاع قيمة معينة لهذا العنصر في قاعدة البيانات .

2)     Checked  وهي لوضع العنصر في حالة الاختيار المسبق .

مثال :

<input type="checkbox" name="C1" checked><b>أقل من ذلك</b>

 

<input type="radio" name="R1" style="font-weight: 700" checked ><b>اختبار الشهر الأول&nbsp; </b>  

 

  File  

 لإدخال الملفات وذلك ليتمكن المستخدم من إرسال ملفات إلى الخادم (server ) وليس له سمات خاصة.

مثال :

 <input type="file" name="pic2" size="20" tabindex="11">

  Bottun   الأزرار

وهو لإنشاء الأزرار وله سمتين هما :

 Value     وتحوي النص المكتوب على الزر .

On click   ويحتوي على المسار الذي يُتخذ عند النقر على الزر .

مثال :

 <input type="button" value="send" onclick="check(this.form)">

 Image   الصورة

وله سمة واحده خاصة به هي Src   ويحتوي على عنوان الصورة  .

مثال :

<input border="0" src="../images/school2.jpg" name="I1" width="65" height="61" type="image" value =دخول onclick ="window.open('test.htm')">

  Submit

    Reset 

ولهما سمة إضافية مشتركة هي ( Value ) وتحتوي على النص الذي سيعرض على الزر.

مثال :

 <input type="submit" value="Submit" name="B1">