في هذا الدرس سوف تتعرف على النماذج ووظائفها وبعض التطبيقات عليها.
مقدمة:
في هذا الدرس سوف نتاول أحد أهم الأمور في البي اتش بي وهي النماذج.
تفيدك النماذج في صناعة أي برنامج حيث أنه تاكد لا تجد أي برنامج لا يحتوي على النماذج (form)، وظيفة النماذج تتركز في إرسال أحد المتغيرات إلى صفحة معينة أو إلى بريد معين، مثلاً يمكنك إستخدام النماذج في صناعة نموذج للمراسلة وهذا من أبسط الأمثلة عن النماذج، والعديد من التطبيقات الاخرى، سوف نوضح في هذا الدرس طريقة إنشاء النماذج وكيفية إرسالها إلى إحدى الصفحات وسوف نوضح تطبيقات عملية على النماذج.
صناعة نموذج بسيطة:
في بداية النماذج دائماً نستخدم الوسم <form>، لاحظ المثال التالي:
<html dir=\"rtl\">
<form method=\"get\" action=\"age.php\">
ما هو عمرك؟
<br />
<input type=\"text\" name=\"age\" value=\"ضع عمرك هنا\">
<br />
<input type=\"submit\" value=\"ارسل\">
<input type=\"reset\" value=\"حذف\">
</form>
</html>
لاحظ في المثال السابق أننا وضعنا في البداية كود تحويل إتجاه الصفحة وهذا الكود غني عن التعريف.
أما في السطر الثاني وضعنا الوسم <form> الذي تكلمنا عنه سابقاً واستخدمنا الطريقة get في إرسال البيانات، وقمنا بإرسال البيانات إلى الملف age.php.
ثم وضعنا سؤالاً نرغب بجعل النموذج أن يرسل إجابته.
ثم إستخدمنا الوسم input من نوع text وهذا هو النوع الذي يستخدم لكتابة نص في خانة وهناك أكثر من نوع سوف نوضحها لاحقاً مثل radio و select.
ثم إستخدمنا الوسم input مرة أخرى لإرسال البيانات أو حذف ما تم ملأ الخانة به.
إحفظ النموذج السابق بصفحة من نسق html، قم بتسميتها مثلاً age.html.
ثم سوف نصنع ملفاً آخر إسمه age.php.
ضع هذا الكود فيه
<?php
echo "عمرك هو $age سنة";
?>
سوف يقوم هذا الكود بعرض المتغير $age الذي هو يحتوي على العمر الذي تم إدخاله في الصفحة السابقة.
وظيفة value:
إستخدمنا في المثال السابق value،وظيفة هذا الأمر وضع ما ترغب أن يظهر داخل الحقل كقيمة افتراضية، عند تطبيقك للمثال السابق سوف تفهم وظيفتها بطريقة أوضح.
في المثال السابق النوع الذي وضعناه للـinput هو text، سوف نأخذ الآن مثالاً آخر وسوف نضع لك مجموعة من الأمثلة لن نشرحها بل سوف نترك لك وظيفة معرفة عملها.
<html dir=\"rtl\">
<form method=\"get\" action=\"age.php\">
ما هو عمرك؟<br />
<select name = \"age\">
<option>12-19 سنة</option>
<option>20-30 سنة</option>
<option>31-40 سنة</option>
<option>41 سنة فما فوق</option>
</select><br />
<input type=\"submit\" value=\"ارسل\">
<input type=\"reset\" value=\"اعادة\">
</form>
</html>
إحفظ الكود السابق بصفحة من نسق html مثلاً قم بتسميتها age.html.
إصنع ملفاً آخر بإسم age.php، واحفظ هذا الكود بداخله:
<?php
echo "عمرك هو $age";
?>
المثال هذا شبيه بالمثال السابق ولكن يختلف عنه بأننا إستخدمنا select بدلاً من text وعند تجربتك للمثال السابق سوف تلاحظ الفرق بين الطريقتين.
وهناك عدة طرق أخرى مثل radio و textarea و checkbox فيما يلي طريقة إستخدام كل من هذه الطرق وسوف نترك لك معرفة وظيفة كل منها.
<form method=\"get\" action=\"age.php\">
checkbox:
<br />
<input type=\"checkbox\" name=\"test1\" checked value=\"ON\">
<br />
<br />
radio:
<br />
<input type=\"radio\" name=\"test\" checked>
<br />
<br />
textarea:
<br />
<textarea name=\"test\" rows=\"4\" cols=\"32\">
ادخل معلوماتك الشخصية هنا
</textarea>
</form>
وظيفة الأمر checked:
يستخدم هذا الأمر لتعيين قيمة إفتراضية في الخيارات من نوع radio و checkbox ويختلف الأمرين عن بعضهما بأن radio فقط تتيح لك إختيار قيمة واحدة، أما checkbox فيمكنك عن طريقها اختيار اكثر من قيمة.
الحقول المشفرة:
لابد أنك عندما تريد أن تقوم بتسجيل الدخول لبريدك تلاحظ أنه عند إدخال كلمة المرور تكون مشفرة ولا يمكنك قرائتها، وقد تستفسر عن طريقة عمل مثل هذه الحقول، والطريقة هي كالتالي:
<html dir=\"rtl\">
<form method=\"get\" action=\"age.php\">
اسم المستخدم:
<br />
<input type=\"text\" name=\"usern\">
<br />
كلمة المرور:
<input type=\"password\" name=\"pass\">
</form>
</html>
لابد أنك لاحظت أنه في حقل كلمة المرور إستخدمنا الحقل من نوع password، وليس من النوع text الذي إستخدمناه في حقل إسم المستخدم.
نتمنى ان تكون لديك الآن معرفة جيدة بالنماذج، سوف نواصل الحديث عنها في دروس قادمة وسوف نوضح طريقة انشاء بواسطة برنامج FrontPage.