النمـــــــــــــاذج Forms

أولاً : ماهي النماذج ؟ وما هي فائدتها ؟
النماذج هي عبارة عن مجموعة من الحقول والاختيارات يقوم الزائر بتعبئة واختيار ما يريد منها ثم يضغط زر ارسال ( Submit ) لتظهر النتيجة في صفحة في موقعك أو ترسل لبريدك مباشرة .

ثانياً : معلومات حول النموج :
- يبدأ النموذج بوسم <FORM> وينتهي بوسم </FORM> .
- يقوم بإدارة النموذج نيابة عنك برنامج مكتوب بإحدى لغات الإنترنت مثل perl ، php ، asp .
- لكي يعمل النموذج في موقعك يجب أن يعمل البرنامج الذي تربط به هذا النموذج بشكل سليم . وهذا يتطلب أن يدعم السيرفر المستضيف لموقعك تشغيل هذا البرنامج .
- قبل البدء في إنشاء نموذج في موقعك يجب أن يكون لديك معرفة ولو بسيطة بطريقة تركيب هذه البرامج ، والتي سنذكر في هذا الدرس مثال على تركيب أحدها وهو مكتوب بلغة السي جي آي " Cgi " .

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

<TABLE style="WIDTH: 100%; mso-cellspacing: .7pt; mso-yfti-tbllook: 1184; mso-table-dir: bidi; mso-padding-alt: 0cm 0cm 0cm 0cm" dir=rtl class=MsoNormalTable border=0 cellSpacing=1 cellPadding=0 width="100%">

<TR style="mso-yfti-irow: 0; mso-yfti-firstrow: yes">
<td style="BORDER-BOTTOM: #f0f0f0; BORDER-LEFT: #f0f0f0; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 28%; PADDING-RIGHT: 0cm; BACKGROUND: #003366; BORDER-TOP: #f0f0f0; BORDER-RIGHT: #f0f0f0; PADDING-TOP: 0cm" width="28%">
</TD>
<td style="BORDER-BOTTOM: #ca8800 1.5pt solid; BORDER-LEFT: #ca8800 1.5pt solid; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 72%; PADDING-RIGHT: 0cm; BACKGROUND: #003366; BORDER-TOP: #ca8800 1.5pt solid; BORDER-RIGHT: #ca8800 1.5pt solid; PADDING-TOP: 0cm" width="72%">
</TD></TR>
<TR style="mso-yfti-irow: 1">
<td style="BORDER-BOTTOM: #f0f0f0; BORDER-LEFT: #f0f0f0; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 28%; PADDING-RIGHT: 0cm; BACKGROUND: #ca8800; BORDER-TOP: #f0f0f0; BORDER-RIGHT: #f0f0f0; PADDING-TOP: 0cm" width="28%">
</TD>
<td style="BORDER-BOTTOM: #ca8800 1.5pt solid; BORDER-LEFT: #ca8800 1.5pt solid; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 72%; PADDING-RIGHT: 0cm; BACKGROUND: #ffe7c1; BORDER-TOP: #ca8800 1.5pt solid; BORDER-RIGHT: #ca8800 1.5pt solid; PADDING-TOP: 0cm" width="72%">يدرج منطقة نموذج في الصفحة تحتوي فقط على زرين ، أحدهما للارسال ( Submit ) والآخر للمسح ( Reset ) .
</TD></TR>
<TR style="mso-yfti-irow: 2">
<td style="BORDER-BOTTOM: #f0f0f0; BORDER-LEFT: #f0f0f0; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 28%; PADDING-RIGHT: 0cm; BACKGROUND: #ca8800; BORDER-TOP: #f0f0f0; BORDER-RIGHT: #f0f0f0; PADDING-TOP: 0cm" width="28%">
</TD>
<td style="BORDER-BOTTOM: #ca8800 1.5pt solid; BORDER-LEFT: #ca8800 1.5pt solid; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 72%; PADDING-RIGHT: 0cm; BACKGROUND: #ffe7c1; BORDER-TOP: #ca8800 1.5pt solid; BORDER-RIGHT: #ca8800 1.5pt solid; PADDING-TOP: 0cm" width="72%">يدرج مربع نص بسطر واحد .
</TD></TR>
<TR style="mso-yfti-irow: 3">
<td style="BORDER-BOTTOM: #f0f0f0; BORDER-LEFT: #f0f0f0; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 28%; PADDING-RIGHT: 0cm; BACKGROUND: #ca8800; BORDER-TOP: #f0f0f0; BORDER-RIGHT: #f0f0f0; PADDING-TOP: 0cm" width="28%">
</TD>
<td style="BORDER-BOTTOM: #ca8800 1.5pt solid; BORDER-LEFT: #ca8800 1.5pt solid; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 72%; PADDING-RIGHT: 0cm; BACKGROUND: #ffe7c1; BORDER-TOP: #ca8800 1.5pt solid; BORDER-RIGHT: #ca8800 1.5pt solid; PADDING-TOP: 0cm" width="72%">يدرج مربع نص متعدد الأسطر ، به شريط تمرير .
</TD></TR>
<TR style="mso-yfti-irow: 4">
<td style="BORDER-BOTTOM: #f0f0f0; BORDER-LEFT: #f0f0f0; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 28%; PADDING-RIGHT: 0cm; BACKGROUND: #ca8800; BORDER-TOP: #f0f0f0; BORDER-RIGHT: #f0f0f0; PADDING-TOP: 0cm" width="28%">
</TD>
<td style="BORDER-BOTTOM: #ca8800 1.5pt solid; BORDER-LEFT: #ca8800 1.5pt solid; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 72%; PADDING-RIGHT: 0cm; BACKGROUND: #ffe7c1; BORDER-TOP: #ca8800 1.5pt solid; BORDER-RIGHT: #ca8800 1.5pt solid; PADDING-TOP: 0cm" width="72%">يدرج مربع تدقيق يمكن للزائر اختيار أكثر من واحد منها .
</TD></TR>
<TR style="mso-yfti-irow: 5">
<td style="BORDER-BOTTOM: #f0f0f0; BORDER-LEFT: #f0f0f0; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 28%; PADDING-RIGHT: 0cm; BACKGROUND: #ca8800; BORDER-TOP: #f0f0f0; BORDER-RIGHT: #f0f0f0; PADDING-TOP: 0cm" width="28%">
</TD>
<td style="BORDER-BOTTOM: #ca8800 1.5pt solid; BORDER-LEFT: #ca8800 1.5pt solid; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 72%; PADDING-RIGHT: 0cm; BACKGROUND: #ffe7c1; BORDER-TOP: #ca8800 1.5pt solid; BORDER-RIGHT: #ca8800 1.5pt solid; PADDING-TOP: 0cm" width="72%">يدرج زر اختيار ، بحيث لا يستطيع الزائر أن يختار منها إلا واحد فقط .
</TD></TR>
<TR style="mso-yfti-irow: 6">
<td style="BORDER-BOTTOM: #f0f0f0; BORDER-LEFT: #f0f0f0; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 28%; PADDING-RIGHT: 0cm; BACKGROUND: #ca8800; BORDER-TOP: #f0f0f0; BORDER-RIGHT: #f0f0f0; PADDING-TOP: 0cm" width="28%">
</TD>
<td style="BORDER-BOTTOM: #ca8800 1.5pt solid; BORDER-LEFT: #ca8800 1.5pt solid; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 72%; PADDING-RIGHT: 0cm; BACKGROUND: #ffe7c1; BORDER-TOP: #ca8800 1.5pt solid; BORDER-RIGHT: #ca8800 1.5pt solid; PADDING-TOP: 0cm" width="72%">لإدراج قائمة منسدلة للأسفل ، وهي مناسبة للاختيارات الكثيرة .
</TD></TR>
<TR style="mso-yfti-irow: 7">
<td style="BORDER-BOTTOM: #f0f0f0; BORDER-LEFT: #f0f0f0; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 28%; PADDING-RIGHT: 0cm; BACKGROUND: #ca8800; BORDER-TOP: #f0f0f0; BORDER-RIGHT: #f0f0f0; PADDING-TOP: 0cm" width="28%">
</TD>
<td style="BORDER-BOTTOM: #ca8800 1.5pt solid; BORDER-LEFT: #ca8800 1.5pt solid; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 72%; PADDING-RIGHT: 0cm; BACKGROUND: #ffe7c1; BORDER-TOP: #ca8800 1.5pt solid; BORDER-RIGHT: #ca8800 1.5pt solid; PADDING-TOP: 0cm" width="72%">لإدراج الأزرار ... لا تحتاجه فالأزرار ستدرج تلقائياً مع الفورم الفارغ .
</TD></TR>
<TR style="mso-yfti-irow: 8; mso-yfti-lastrow: yes">
<td style="BORDER-BOTTOM: #f0f0f0; BORDER-LEFT: #f0f0f0; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 28%; PADDING-RIGHT: 0cm; BACKGROUND: #ca8800; BORDER-TOP: #f0f0f0; BORDER-RIGHT: #f0f0f0; PADDING-TOP: 0cm" width="28%">
</TD>
<td style="BORDER-BOTTOM: #ca8800 1.5pt solid; BORDER-LEFT: #ca8800 1.5pt solid; PADDING-****: 0cm; PADDING-LEFT: 0cm; WIDTH: 72%; PADDING-RIGHT: 0cm; BACKGROUND: #ffe7c1; BORDER-TOP: #ca8800 1.5pt solid; BORDER-RIGHT: #ca8800 1.5pt solid; PADDING-TOP: 0cm" width="72%">يدرج صورة يمكنك استخدامها بدل الزر .
</TD></TR></TABLE>

رابعاً : مثال لإنشاء فورم بريدي في موقعك :
** ماذا نعني بالفورم البريدي ؟
الفورم البريدي هو نموذج يستطيع الزائر من خلاله أن يرسل لك رسالة لبريدك مباشرة من موقعك دون الحاجة لاستخدام بريده للارسال ... وهو كما تلاحظ يسهل على الزائر عملية الارسال ويشجعه عليها .
## والآن لنبدأ معاً إنشاء هذا الفورم خطوة خطوة :
من خلال هذا الفورم يستطيع الزائر أن :
- يرسل لك اسمه الحقيقي أو المستعار .
- يدرج بريده الإلكتروني للتمكن من الرد عليه .
- يحدد عنوان لرسالته .
- يكتب رسالة لك كما يريد .
* الخطـــــــــــوات :
1- افتح قائمة Insert وأشر على Form ستفتح قائمة ، اختر منها Form .
كما تلاحظ تم إدراج مستطيل بحد أسود متقطع به زران ، أحدهما Submit للارسال والآخر Reset للمسح والكتابة من جديد .هذا هو الفورم ولكنه لا يزال فارغ .
* لتغيير Submit و Reset إلى ارسال ومسح على التوالي ، انقر نقرة مزدوجة على زر Submit واستبدل هذه الكلمة بـ ارسال ، وبنفس الطريقة غير Reset إلى مسح .
2- اترك المؤشر داخل الفورم وادرج جدول بأربعة صفوف وعمودين .
3- اكتب في العمود الأيمن بالترتيب من أعلى لأسفل :
- الاســــم :
- عنوان بريدك الإلكتروني :
- عنوان رسالتك :
- اكتب رسالتك :
4- في الخلية الأولى من العمود الأيسر أدرج مربع نص وحيد السطر كالتالي :
Insert>Form>On-Line Text Box
ثم انقر عليه نقرة مزدوجة ، وفي خانة Name اكتب name ثم اضغط OK .
5- في الخلية الثانية كما في الخلية الأولى مع تغيير الاسم في خانة Name إلى email .
6- في الخلية الثالثة أضف قائمة منسدلة بها عدة خيارات لعنوان الرسالة وذلك كالتالي :
Insert>Form>Drop-Down Menu
ثم انقر عليه نقرة مزدوجة وفي خانة Name اكتب subject ، وقبل أن تضغط OK حدد خيارات العنوان كالتالي :
أ- اضغط على زر Add وفي خانة Choice اكتب " اختر عنوان لرسالتك " ثم اضغط OK .
ب- مرة أخرى اضغط Add واكتب في خانة Choice شكر وتهنئة ثم اضغط OK .
ج- وبنفس الطريقة أضف جميع العناوين التي تريدها ، ثم اضغط OK لإغلاق مربع حوار Drop-Down Menu Properties .
7- في الخلية الرابعة أضف مربع نص نتعدد الأسطر كالتالي :
Insert>Form>Scrolling Text Box
ثم انقر عليه نقرة مزدوجة وفي خانة Name اكتب massage ثم اضغط Ok .

خامساً : تطوير أداء هذا النموذج ( الفورم البريدي ) :
** سنشرح هنا كيف نخصص صفحة شكر لمن يرسل بريد و صفحة خطأ لمن يترك خانات مطلوبة وذلك كالتالي :
أ- صمم صفحة شكر وليكن اسمها thanks.htm وأخرى خطأ وليكن اسمها error.htm بواسطة الفرونت بيج واكتب فيها ما تريد من عبارات وارسلها لموقعك في الشبكة .
ب- ضع الكود الخاص بكل من صفحة الشكر والخطأ والذي ستدرج فيه عنوان الصفحتين في موقعك في الشبكة وذلك بواسطة الفرونت بيج كالتالي :
1- إضافة صفحة الشكر thanks.htm :
- ضع المؤشر داخل الفورم واضغط بيمين الفأرة واختر Form Properties .
- اضغط على زر Advanced في الأسفل سيفتح لك مربع جديد .
- اضغط على زر Add واكتب redirect في خانة Name ، ثم اكتب في خانة Value عنوان صفحة الشكر في موقعك مثل [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] واضغط OK .
2- إضافة صفحة الخطأ error.htm :
بنفس الطريقة السابقة اضغط Add واكتب missing_fields_redirect في خانة Name ، ثم اكتب عنوان صفحة الخطأ في موقعك كالسابق .
* ولكي تظهر رسالة الخطأ عند ترك الخانات الضرورية قم بالآتي :
- ضع المؤشر داخل الفورم واضغط بيمين الفأرة واختر Form Properties .
- اضغط على زر Advanced في الأسفل سيفتح لك مربع جديد .
- اضغط على زر Add واكتب required في خانة Name ، ثم اكتب في خانة Value أسماء الخانات التي ترى ضرورة ملأها مفصولة بفاصلة مثل name,email ثم اضغط OK ثلاث مرات .

سادساً : تحويل الرسائل على بريدك الخاص وربط الفورم البريدي بالبرنامج:
أ- يجب كتابة عنوان البريد الذي تريد أن تستقبل عليه الرسائل وذلك باتباع التالي :
- ضع المؤشر داخل الفورم واضغط بيمين الفأرة واختر Form Properties .
- اضغط على زر Advanced في الأسفل سيفتح لك مربع جديد .
- اضغط على زر Add واكتب recipient في خانة Name ، ثم اكتب في خانة Value عنوان البريد الإلكتروني مثل [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ثم اضغط OK ثلاث مرات .
ب- يجب أن تربط هذا الفورم ببرنامج كما ذكرنا في " ثانياً " والبرنامج الذي سنستخدمه هنا اسمه FormMail.cgi وسنضعه داخل مجلد cgi-bin في الموقع في الشبكة ، وسنقوم بعملية الربط كالتالي :
- ضع المؤشر داخل الفورم واضغط بيمين الفأرة واختر Form Properties .
- أشر على مربع الاختيار Send to other وتأكد من اختيار الخيار الأول في القائمة المنسدلة بجانبه .
- اضغط على زر Options في الأسفل سيفتح مربع جديد .
- اكتب في خانة Action عنوان البرنامج في موقعك مثل [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ثم اضغط OK مرتين .

2- فك ضغط البرنامج وافتحه في الدفتر المرفق بويندوز "WordPad" .
3- غير des4arab.com إلى عنوان موقعك ( لاحظ أنها مكررة مرتين ) .
4- احفظ التغيير بهيئة Text Document .
5- أرسل البرنامج إلى مجلد cgi-bin في موقعك بواسطة برنامج FTP بهيئة ASCII .. من أسفل البرنامج يمكنك تحديد هذه الهيئة .

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