‫النمـــــــــــــــاذج >‪<Forms‬‬

‫النماذج في الويب هي عبارة عن استمارات تقوم بتعبئتها ثم عند إرسالها لخادم الويب (السيرفر) يتلقاها‬
‫البرنامج ويقوم بأجراء العمليات عليها‪.‬‬

‫فائدة النماذج ‪:‬‬

‫لنقل أنك مثالً أردت شراء كتاب من االنترنت فإنك في الواقع تحتاج إلى تعبئة استمارة ببياناتك ورقم بطاقة‬
‫االئتمان وغير ذلك من المعلومات ويتم ذلك عن طريق نموذج >‪ <Form‬في الواقع أنت تقوم باختيار‬
‫الكتاب الذي تريد وتكتب اسمك ورقم هاتفك وصندوق بريدك (ربما) في فراغات أو عن طريق اإلشارة الى‬
‫مجموعة من الخيارات ‪.‬‬
‫يتم تخزين هذه القيم في المتغيرات التي يتم كتابتها في الخاصية ‪ name‬ويتم إرسالها عند ضغط زر ‪-‬‬
‫سال البيانات )‪ - (submit‬إلى البرنامج الصفحة التي سوف تقوم بمعالجة هذه البيانات والتي يتم تحديدها‬
‫في الخاصية ‪ ACTION‬وإجراء العمليات عليها مثل تخزينها مثالً في قاعدة البيانات أو إرسالها إلى البريد‬
‫االلكتروني أو نقل البيانات إلي صفحة أخرى‪.‬‬

‫ماذا يعمل العميل في النماذج ؟‬

‫إنه باختصار يقوم بتعبئة مربعات نصوص )‪ (textBox‬ويقوم بوضع عالمة صح في مربعات االختيار‬
‫‪ check boxes‬أو يقوم بالتصويت أحيانا لشي معين فيختار زر اختيار أزرار الراديو هذه األشياء كلها يتم‬
‫إنشاءها بواسطة الـ‪.htm‬‬

‫خصائص النماذج ‪:‬‬

‫يجمع النموذج خصائص المضيف لكننا هنا سنتطرق الى اثنين منهما وهما ‪METHOD ACTION‬‬

‫‪: ACTION‬‬
‫وظيفة هذه الخاصية أن تخبر السيرفر مكان الصفحة التي يقوم بإرسال معلومات النموذج إليها أوعنوانها أيا‬
‫كان نوعها ‪ ,‬وطبعا ً في حالتنا ستكون الصفحة الثانية هي الصفحة التي تحتوي على سكربت الـ ‪html .‬‬
‫ليس مهما أن تكون الصفحة ‪ html‬فقد تكون ‪ html‬ولكنها تحتوي على كود يختص بالتعامل مع برنامج‬
‫تفاعلي لصفحات الويب مثل الجافا‪.‬‬

‫>”‪<form action = "pro.html‬‬

‫…………‬
‫>‪</form‬‬
 ‫‪METHOD‬‬
‫هذه الخاصية تقوم بإخبار النموذج طريقة إرسال المعلومات إلى الصفحة الهدف وفي الواقع هناك طريقتين‬
‫مشهورتين ومعروفتين إلرسال المعلومات هما ‪POST . GET‬‬

‫>”‪<FORM ACTION =”test.html” METHOD = “GET‬‬

‫>”‪<FORM ACTIN = “test.html” METHOD =”POST‬‬

‫‪GET‬‬
‫تقوم هذه الخاصية بإخبار مستعرض االنترنت لديك بأن يقوم بإضافة المعلومات التي تمت كتابتها في‬
‫النموذج إلى متصفح االنترنت لديك وتكون طريقة كتابته كالتالي‪:‬‬
‫‪ -‬كتابه عنوان الصفحة المصدر ‪.‬‬
‫‪ -‬إتباعها بعالمة استفهام‪.‬‬
‫‪ -‬كتابة العناوين والقيم‪.‬‬
‫‪http://www.example.com/test.html?name=value‬‬

‫أن النموذج يتكون من عناصر (مربع عالمة ‪ ,‬مربع نص ‪ ,‬زر اختيار) ولكل من هذه العناصر عنوان خاص‬
‫بها (‪ )name‬ولكل منها قيمه خاصة بها (‪. )value‬‬
‫وهي مشابهة للمتغيرات ويمكن أن يحتوي عنوان الصفحة على أكثر من عنوان (‪)name‬وأكثر من قيمة‬
‫(‪ )value‬ويقوم بالتعريف عنهما باستخدام المعامل (&) ‪.‬‬

‫‪http://www.example.com/test.html?animal=cat&age=30‬‬

‫‪POST‬‬
‫وظيفتها هي نفس وظيفة الـ‪ get‬ولكنها الترسل المعلومات في عنوان صفحة االنترنت بل تقوم وضعها في‬
‫الـ‪ body‬التابع لـ‪. http response‬‬
‫باإلضافة إلى أنه يستطيع إرسال البيانات بكمية أكبر من الـ‪. GET‬‬

‫أيهما تستخدم ‪ GET‬أم ‪ POST‬؟‬

‫قد يكون العيب في الخاصية ‪ GET‬عدم سرية المعلومات التي تقوم بكاتبتها ومن الممكن أن تظهر للشخص‬
‫الذي يجلس إلى جوارك ‪ ...‬خاصة عندما تريد الحفاظ على سرية معلوماتك ‪.‬‬
‫أضف إلى ذلك أنها غير مفيدة في النصوص الكبيرة الحجم ‪.‬‬
‫ولكنها مفيدة في أشياء كثيرة فمثالً محركات البحث يجب أن تستخدم هذه الخاصية لكي يستطيع المستخدم أن‬
‫يستخدم عنوان البحث ويحتفظ به لوقت آخر وال يقوم من جديد بكتابة الكلمة التي يبحث عنها ‪.‬‬
‫أيضا الـ‪ POST‬مفيدة في إخفاء المعلومات واحتواء كميات كبيرة من البيانات ولكن اليمكن االحتفاظ بعنوان‬
‫الصفحة ‪ ....‬مع ذلك فإنها أيضا ليست جيدة في الحماية بحيث أن أي هاكر خبير يمكنه الحصول على‬
‫المعلومات إذا لم يكن لها تشفير معين في نقلها ‪..‬لكن إذا أردت فعالً أن تجعلها محمية فيجب عليك استخدام‬
‫اتصال محمي إلى سيرفر محمي‪.‬‬

‫أدوات النماذج‬
‫أدوات التحكم هي عبارة عن مربعات النصوص العادية التي يدخل فيها المستخدم أسمة وعنوانه وأزرار‬
‫الراديو التي يقوم المستخدم باختيار معين والقوائم‪.‬‬
‫‪ : Type‬نحدد فيها نوع الكائن المستخدم أزرار أو مربع نص ‪ ..‬الخ‬
‫‪ : Name‬نقوم بإعطاء اسم المتغير الذي يتم حفظ القيمة فيه‪.‬‬
‫‪ : Value‬يتم وضع قيمة فيه ويختلف عملة من أداة إلى أخرى‪.‬‬

‫تطبيقات عملية‬
‫برنامج بسيط يتكون من ملفين ‪ ...‬الملف األول يحتوي على كود ‪ html‬حيث يقوم بتكوين النموذج والملف‬
‫الثاني يقوم باستقبال القيم وطباعتها‪.‬‬

‫مربع النص ‪....‬‬

‫‪------------------ html page ----------------‬‬

‫<‪> html‬‬
‫<"‪>form method = "GET" action = "pro.html‬‬
‫ماهي هوايتك المفضلة ؟‬
‫<‪>br‬‬
‫>”‪<input type = "text" name= "fav" value=”football‬‬
‫<‪>br‬‬
‫>”أرسل”=‪<input type = submit value‬‬
‫>”تراجع”=‪<input type= reset value‬‬
‫<‪>form/‬‬
‫>‪</html‬‬
 .... ‫مربع نص يم تحديد حجمة بالصفوف واألعمدة‬

------------------ html page ----------------

<form method = "GET" action = "pro.html">

‫ماهي المواد الدراسية التي تدرسها ؟‬
<br>
<TEXTAREA NAME = "courses" ROWS="10"COLS="50">
Database
Visual Basic
C++
HTML
Operating System
</TEXTAREA>
<br>
<input type = submit value="SEND">
</form>

.... Check Box ‫أزرار االختيار‬

------------------ html page ----------------

<form method = "POST" action = "pro.html">
What would you like to drink?
<br>
<INPUT TYPE="CHECKBOX" NAME = "A1"value="tea" CHECKED>
tea
<br>
<INPUT TYPE="CHECKBOX" NAME = "A2"value="coffe">
coffe
<br>
<INPUT TYPE="CHECKBOX" NAME = "A3"value="water">
water
<input type = submit value="SEND">
</FORM>
 ....Radio ‫أزرار االختيار‬

------------------ html page ----------------

<form method = "POST" action = "pro.html">
<br>
where you are nationality?
<br>
<INPUT TYPE="radio" NAME = "c1"value="Libya" >
Libya
<INPUT TYPE="radio" NAME = "c1"value="Egypt" >
Egypt
<INPUT TYPE="radio" NAME = "c1"value="UAE" >
UAE
<input type = submit value="SEND">
</FORM>

....Drop down list

------------------ html page ----------------

<form method = "GET" action = "pro.html">
How old are you?
<br>
<select name = "age">
<option> 20 </option>
<option> 30 </option>
<option> 40 </option>
<option> 50 </option>
</select>
<input type = submit value="SEND">