(8) الدرس الثامن: النماذج وكيفية تضمينها في صفحات الويب

[سامية السلفية]

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

الدرس الثامن:
النماذج وكيفية تضمينها في صفحات الويب.
عندما نحتاج إلى معلومات محددة من الزوار ، بيانات شخصية ، أو عناوين البريد الإلكتروني أو تقييم الزوار للموقع.. إلخ ، فإن أفضل طريقة لعمل ذلك هي إعطاءهم (الأشخاص المستهدفين) نموذج لتعبئته؛ وذلك لعدة أسباب لعل من أهمها :
- إمكانية تنظيم البيانات المدخلة من خلالها.
- وسهولة وسرعة استخدامها من قبل زوار الموقع.
ومن أبرز الأمثلة على النماذج في مواقع الويب هي دفاتر الزوار، ونماذج التسجيل لتلقي الرسائل الإخبارية أو إعلانات العروض الخاصة، وأيضا نماذج التسجيل في المنتديات والمواقع المختلفة.

كم شكلاً من أشكال إدخال البيانات ؟

وهناك أشكال أخرى سوف يتم التعامل معها من خلال هذا الدرس ، إن شاء الله.

مع أن الأشكال السابقة تختلف عن بعضها البعض في المظهر وطريقة التعريف إلا أنها جميعاً تندرج ضمن وسمين أساسيين للنماذج هما:

<form> ... <‎/form>

وطبعا نحتاج لتحديد بعض الخصائص التي تتعلق بطبيعة هذا النموذج. ولدينا هنا ثلاث خصائص:
action
لتحديد العنوان الذي سيتم إرسال بيانات النموذج إليه. قد يكون هذا عنواناً لبريد إلكتروني email أو قد يكون عنواناً لبرنامج cgi موجود على الكمبيوتر الخادم server الذي تتواجد عليه صفحة الويب، حيث يستقبل هذه البيانات ويعالجها حسب التعليمات الموجودة فيه كأن يضيفها مثلاً إلى إحدى الصفحات (كما يحدث عادة في دفاتر الزوار) أو يتحقق من صحة بعض الحقول المدخلة ومطابقتها لمعايير معينة، أو أن يقوم بالبحث عن كلمة أو عبارة ضمن صفحات الموقع كما في نماذج البحث الموجودة في مواقع الويب.

<form  action="mailto:someone@domain.com"> ...  <‎/form>

<form  action="name_and_address_of_cgi_script"> ... <‎/form>

method
لتحديد الطريقة التي سيتم بها التعامل مع العنوان المحدد في الخاصية السابقة action. وهناك قيمتين لهذه الخاصية هما:
get التي تستخدم في حالة كون عملية المعالجة داخلية أي تتم داخل الخادم server نفسه.
مثلا عندما نستخدم نموذج البحث عن كلمة في الموقع، فإن عملية المعالجة (البحث) تجري مباشرة في الموقع.
و post وتستخدم عندما تكون عملية المعالجة خارجية كأن يتم إرسال البيانات إلى عنوان بريد إلكتروني.

<form action="mailto:someone@domain.com"  method="post"> ... <‎/form>

<form  action="name_and_address_of_cgi_script" method="get"> ...  <‎/form>

enctype
هذه الخاصية تحدد طريقة الترميز التي سيتم إرسال البيانات وفقاً لها. وهي تأخذ 3 قيم: (يجب أن تكتب هذه القيم كما هي نصاً وحرفاً)

application/x-www-form-urlencoded
multipart/form-data
text/plain

والدافع لإستخدام أي منها هو:
طبيعة عملية المعالجة التي ستجرى على البيانات أو طبيعة برنامج البريد الإلكتروني الذي ستستقبل هذه البيانات من خلاله (إذا كان يدعم mime أم لا، وهي إختصار للعبارة multi-purpose internet mail extentions وهي من المعايير السائدة في الإنترنت والتي تتعلق بنقل جميع أنواع البيانات من صوت وصورة وليس فقط النصوص من خلال البريد الإلكتروني) وتقوم بإعطاء كل نوع من البيانات وصفا خاصا ، فمثلا :
application/doc تعني ملف word
image/jpeg تعني صورة من نوع jpeg.

- multipart/form-data : لا نحتاج لترميز أي بيانات ؛ لأنه يستخدم في صفحات أو نماذج رفع الملفات. مثال (اختر ملف نصي txt):

<form method="post" enctype="multipart/form-data" action="fup.cgi">

الملف: <input name="upfile" type="file"><br>
وصف الملف: <input name="note" type="text"><br>
<br>
<input value="رفع" type="submit">
</form>

انظر إلى هذه الصفحة

المثال الثاني

- عند استخدام text/plain ستصل البيانات بالشكل التالي:

name=abdullah mohd
address=makka , suadi arabia
email=a_m@gmail.com

( الكلمات name, address, email هي أسماء الحقول التي نقوم نحن بتعريفها أثناء عملية إنشاء النموذج أما النصوص الظاهرة بعد إشارة المساواة فهي البيانات التي يدخلها الزائر)

- أما عند استخدام application/x-www-form-urlencoded (وهي القيمة الإفتراضية) فستصل البيانات بالشكل:

name=abdullah+mohd&address=makka+,+saudi arabia&email=a_m@gmail.com

يتم ترميز جميع البيانات المدخلة قبل إرسالها. الفراغات إلى "+" وبقية الرموز إلى ascii hex
لذلك تتوفر برامج خاصة تعرف بِ formaters تقوم بإعادة ترتيب البيانات المرسلة من خلال النماذج بشكل مفهوم بحيث تصبح كما لو كانت مرسلة بترميز text/plain

لكن أي طريقة هي الأنسب للإستخدام؟ هذا يعتمد على طريقة المعالجة والنقل بالبريد.

مثال: تعريف النموذج لاستقبال البيانات من الموقع إلى عنوان البريد الإلكتروني:

<form action="mailto:email@domain.com" method="post" enctype="text/plain">‎ 
... 
<‎/form>

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

المثال الأول:
<input name="t1" >ادخل اسمك وعنوانك

استخدمنا الوسم < input> لتعريف هذا الشكل ومن ثم قمت بإضافة الخاصية type لهذا الوسم لتحديد نوع الشكل الذي أريده وأعطيتها القيمة text أي

<form‎>
‎<input type="text">‎
<‎/‎form>

هذه جميع الأشكال (القيم) المستخدمة مع الخاصية type بالإضافة لشكلين ندرجهما بالوسمين
< select>, <textarea> ،إن شاء الله ، سوف نناقشها لاحقاً بشكل مفصل.

الخاصية الثانية المستخدمة مع < input> هي:
name وتستخدم لتعريف أو تسمية حقل البيانات في داخل النموضج ، (أي : لن يظهر للزوار) وفي مثالنا اسم الحقل address.
وهذا التعريف له عدة استخدامات من أهمها : أنه عندما استلام النماذج المرسلة من الزوار ، تكون هذه الحقول معرفة بالأسماء التي أدرجت بواسطة الخاصية name.

<form‎>
‎<input type="text" name="address">‎
<‎/‎form> 

أما العبارة "ادخل اسمك وعنوانك : " فهي للتوضيح حتى يعرف الزائر ما الذي يجب عليه كتابته .

‎

<form>‎
ادخل اسمك وعنوانك :‎<input type="text" name="address">‎
<‎/‎form>

ويمكن أن تظهر في الحقل قيمة افتراضية نحددها من خلال الخاصية value. للتسهيل على الزوار إذا كانت هذه القيمة تستخدم غالبا، وأيضا يمكن حذفها وكتابة قيمة أخرى بدلاً منها.

‎

<form>‎
ادخل اسمك وعنوانك : ‎<input type="text" name="address" value="عبدالله محمد, المدينة المنورة">‎
<‎/‎form>

لتحديد حجم الحقل ولذلك نستخدم الخاصية size مع الرقم الذي نريده كحجم للحقل:

‎<form>‎
ادخل اسمك وعنوانك : ‎<input type="text" name="address" value=" عبدالله محمد, المدينة المنورة " size="43">‎
<‎/‎form>

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

‎<form>‎
ادخل اسمك وعنوانك : ‎<input type="text" name="address" value=" عبدالله محمد, المدينة المنورة " size="43" maxlength="40">‎
<‎/‎form>

الخلاصة:
خصائص الوسم input هي:
type: لتحديد نوع (شكل) حقل البيانات.
name: لتعيين الاسم.
value: لتعيين قيمة إفتراضية (مبدئية).
size: لتحديد الحجم.
maxlength: لتعيين الحد الأقصى لعدد الحروف المدخلة في الحقل.


الآن سنتعرف على مجموعة من الأشكال الخاصة بالاختيار من متعدد وهي بالمناسبة ثلاثة أنواع:
radio, checkbox وقائمة الإختيار select

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

آخر مؤهل دراسي:

لإنشاء مثل هذه القائمة،
1- أولا نعرّف النموذج:

<form>

<‎/form>

2- ثم نقوم بتعريف الشكل ، والوسم الخاص بذلك < input> ، نحتاج إلى أربعة وسوم:

<form>
<input type="radio"> <br>
<input type="radio"> <br>
<input type="radio"> <br>
<input type="radio"> <br>
<‎/form>

3- الخطوة التالية ، تسمية هذه المدخلات، باستخدام الخاصية name.
سنختار اسم أو رمز معبر عن البيانات وليكن "edu"

<form>
<input type="radio" name="edu"> <br>
<input type="radio" name="edu"> <br>
<input type="radio" name="edu"> <br>
<input type="radio" name="edu"> <br>
<‎/form>

4- ثم نقوم بإعطاء قيمة لكل مدخلة في هذه القائمة ، باستخدام الخاصية value:

<form>
<input type="radio" name="edu" value="highsch"> <br>
<input type="radio" name="edu" value="bach"> <br>
<input type="radio" name="edu" value="mas&doc"> <br>
<input type="radio" name="edu" value="other"> <br>
<‎/form>

الخاصيتان 3 و4 فيهما التسمية ضمنية فقط ولا تؤثر على شكل النموذج ظاهريا .
5- وأخيرا ، نقوم بتعريف كل حقل باسم ظاهر يوضح محتواه.

<form>
<input type="radio" name="browser" value="hghsch"> ثانوي <br>
<input type="radio" name="browser" value="bach"> بكالريوس<br>
<input type="radio" name="edu" value="mas&doc"> ماجستير أو دكتوراه<br>
<input type="radio" name="edu" value="other"> غير ذلك<br>

<‎/form>

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

<form>
<input type="radio" name="edu" value="hghsch"> ثانوي <br>
<input type="radio" name="edu" value="bach" checked > بكالريوس <br>
<input type="radio" name="edu" value="mas&doc"> ماجستير أو دكتوراه<br>
<input type="radio" name="edu" value="other"> غير ذلك<br>

<‎/form>

(edu = bach)

الشكل الثاني والذي يدعى checkbox.
الفرق بينه وبين الشكل radio أن الزائر هنا يمكنه أن يختار عدة خيارات(أو عدة أجوبة) في وقت واحد.

<form>
<input type="checkbox" name="hghsch" value=" yes"> ثانوي <br>
<input type="checkbox" name="bach" value=" yes" checked> بكالريوس <br>
<input type="checkbox" name="mas&doc" value=" yes"> ماجستير أو دكتوراه<br>
<input type="checkbox" name="other" value="yes" checked> غير ذلك<br>
</form>

(bach=yes
other=yes)

نلاحظ:
أن الخاصية name أعطيت قيمة مميزة لكل حقل.
أما الخاصية value فقد أعطيت قيمة موحدة لجميع الحقول.

النوع الثالث وهو:
قوائم الاختيار، وفي هذا النوع سنستخدم الوسم <select> بدلاً من <input>:

<select>
<option>
<option>
<option>
.....
.....
<‎/select>

<option> يوضع يستخدم لتحديد كل عنصر من عناصر القائمة.

وسنستخدم هنا أيضا الخاصية name التي تحدد اسم القائمة.
هذه خاصية جديدة وهى خاصية size التي تحدد حجم أو ارتفاع القائمة ، أى عدد البيانات التى تظهر فيها. (قيم صحيحة فقط)

<form>
<select name="edu" size="2">
    ‎<option> ثانوي‎
    ‎<option> بكالريوس‎
    ‎<option> ماجستير أو دكتوراه
    ‎<option> غير ذلك‎
</select>
</form>

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

 <select name="edu" size="4" multiple>
    ‎<option> ثانوي‎
    ‎<option> بكالريوس‎
    ‎<option> ماجستير أو دكتوراه
    ‎<option> غير ذلك‎
</select>

(لأداء عدة اختيارات نضغط على المفتاح ctrl أثناء عملية الإختيار).

أما الخصائص المستخدمة مع الوسم <option> فهي value
وكذلك الخاصية selected والتي نكتبها مع أي <option> ليظهر كاختيار تلقائي.

<select name="edu" size="4" multiple>
‎<option value=ثانوي>ثانوي ‎
‎<option value=بكالريوس selected>بكالريوس‎
‎<option value=ماجستير أو دكتوراه>ماجستير أو دكتوراه
‎<option value=غير ذلك‎>غير ذلك
</select>

ماذا لو أردنا إدخال نص : اسم ، كلمة السر ، تعليق ، عنوان البريد ..إلخ؟
فى هذه الحالة سنستخدم ما يسمى بــ"حقول البيانات textarea"
يتم إدراجه بكتابة الوسوم:

<textarea> ... <‎/textarea>

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

<form>
<textarea name="ماذا ترى؟"> </textarea>
</form>

كما توجد خصائص لتحديد مساحة هذا الحقل عرضاً وارتفاعاً، وهي cols التي تحدد العرض و rows التي تحدد الإرتفاع>
فانظر ماذا ترى؟

<form>
<textarea  name="ماذا ترى؟" cols="15" rows="5">ماذا ترى؟</textarea>
</form>

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

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

<form ...>‎
please enter your name :
‎<input type="text" name="the name" size="40" maxlength="30">‎
please enter your passwod :
‎<input type="password" name="the password" size="40" maxlength="30">‎
<‎/‎form> 

ملاحظة: لم نكتب قيم إفتراضية values للحقول، ويمكن أن نلغيها نهائياً من الشيفرة.

الحقل المخفي hidden:
هذا الحقل يكون مخفيا بالنسبة للزوار ؛ لأنه خاص بالمصمم أو مطور صفحة الويب فقط.
- من استخداماته تمييز أو تعريف النماذج التي يرسلها المستخدمين أو الزوار.

<form ...>‎
please enter your name :
‎<input type="text" name="the name" value="" size="40" maxlength="30">‎
 ‎<input type="hidden" name="my forms" value="form1">‎
 please enter your passwod :
‎<input type="password" name="the password" value="" size="40" maxlength="30">‎
<‎/‎form>

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

‎<input type="hidden" name="form" value="النموذج الأول">‎

في النموذج الثاني ...

‎<input type="hidden" name="form" value="النموذج الثاني">‎

في النموذج الثالث ...

‎<input type="hidden" name="form" value="النموذج الثالث">‎

وبذلك عندما تصل البيانات المرسلة من قبل أي زائر استخدم أي من النماذج الثلاثة سيصل أيضا حقل إضافي (المخفي) وذلك بأحد الأشكال التالية:

form=النموذج الأول
form=النموذج الثاني
form=النموذج الثالث

لإظهار النموذج بصورة مرتبة ومنسقة والتحكم بموقع الحقول فيه يقضل وضعه داخل جدول (border=0)

<form ...>‎
‎<table border="0">‎
<tr>
<td>اسم العضو : </td>
<td>
‎<input type="text" name="the name" value="" size="40" maxlength="30">‎
</‎td>
</tr>
<tr>
<td>كلمة السر : </td>
<td>
‎<input type="password" name="the password" value="" size="40" maxlength="30">‎
</td>
</‎tr>
</table>
</‎form>

كيف نرسل النموذج؟
باستخدام الوسم < input> والنوع submit ، عبارة عن زر غند النقر عليه يقوم بإرسال البيانات التي تم ملؤها في النموذج.

<input type=submit>

أو

لتغيير العبارة الإفتراضية، التي تظهر على الزر ، نستخدم الخاصية value :

<input type=submit value="إرسال">

النوع الثاني من الأزرار هو:
reset والذي يتيح إمكانية إعادة ضبط أو تفريغ جميع الحقول في النموذج

<input type=reset>

<input type=reset value="مسح">

من أشكال البيانات في النماذج والمدرج مع الوسم < input> هو button والذي يقوم بإنشاء زر ضمن النموذج، وهو مرتبط بالنماذج التي تحتوي على نصوص برمجية (أو برامج مكتملة) من لغات متقدمة مثل javascript كونه يستخدم لتشغيل هذه البرامج وإطلاقها.
والأمثلة عديدة : تحويل التاريخ من الهجري إلى الميلادي ، حساب قيمة الزكاة، البخث عن كلمة معينة ، ... إلخ.
- مثال:

[إن شاء الله سنتعرف على بعض تطبيقات javascript في نهاية الدورة]

- ومثال آخر ، أبسط (لنجربه):

<body>
<p align="center">
<input type=button onclick="javascript:window.print()" value="طباعة">
</p>
</body>

الواجب التطبيقي (10)
- إنشاء نموذج <form> ... <‎/form> ، يشتمل على أربعة أشكال -على الأقل- لإدخال البيانات.

وفقكم الله ورزقكم العلم النافع والعمل الصالح


يتبع إن شاء الله ، استخدام تقنية css في تغيير الأشكال الإفتراضية للأزرار button وحقل البيانات textarea وقائمة الإختيار select.

الحمدلله
وصلى الله وسلم على نبينا محمد وعلى آله وصحبه ومن تبعهم بإحسان إلى يوم الدين