ماهي النماذج وكيف يتم انشاءها - مفكر التقنية
بدون تسمية ماهي النماذج وكيف يتم انشاءها

ماهي النماذج وكيف يتم انشاءها

   تعليق   

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


صناعة نموذج بسيطة:


في بداية النماذج دائماً نستخدم الوسم <form>، لاحظ المثال التالي:




PHP CODE:
0001
0002
0003
0004
0005
0006
0007
0008
0009
0010
0011
 <?php <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 CODE:
0001
0002
0003
 <?php
echo 'عمرك هو $age سنة';
?>




سوف يقوم هذا الكود بعرض المتغير $age الذي هو يحتوي على العمر الذي تم إدخاله في الصفحة السابقة.


وظيفة value:
إستخدمنا في المثال السابق value،وظيفة هذا الأمر وضع ما ترغب أن يظهر داخل الحقل كقيمة افتراضية، عند تطبيقك للمثال السابق سوف تفهم وظيفتها بطريقة أوضح.
في المثال السابق النوع الذي وضعناه للـinput هو text، سوف نأخذ الآن مثالاً آخر وسوف نضع لك مجموعة من الأمثلة لن نشرحها بل سوف نترك لك وظيفة معرفة عملها.


PHP CODE:
0001
0002
0003
0004
0005
0006
0007
0008
0009
0010
0011
0012
0013
0014
 <?php <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 CODE:
0001
0002
0003
 <?php
echo 'عمرك هو $age';
?>


المثال هذا شبيه بالمثال السابق ولكن يختلف عنه بأننا إستخدمنا select بدلاً من text وعند تجربتك للمثال السابق سوف تلاحظ الفرق بين الطريقتين.
وهناك عدة طرق أخرى مثل radio و textarea و checkbox فيما يلي طريقة إستخدام كل من هذه الطرق وسوف نترك لك معرفة وظيفة كل منها.
PHP CODE:
0001
0002
0003
0004
0005
0006
0007
0008
0009
0010
0011
0012
0013
0014
0015
0016
0017
0018
 <?php <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 فيمكنك عن طريقها اختيار اكثر من قيمة.


الحقول المشفرة:


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




PHP CODE:
0001
0002
0003
 <?php <html dir='rtl'>
<form method='get' action='age.php'> 
 ?>
اسم المستخدم:
PHP CODE:
0001
0002
0003
0004
 <?php <br />
<input type='text' name='usern'>
<br /> 
 ?>


كلمة المرور:
PHP CODE:
0001
0002
0003
0004
 <?php <input type='password' name='pass'>
</form>
</html> 
 ?>






لابد أنك لاحظت أنه في حقل كلمة المرور إستخدمنا الحقل من نوع password، وليس من النوع text الذي إستخدمناه في حقل إسم المستخدم.

لا تنسى مشاركة هذا المقال!

أعط رأيك حول هذا المقال

الأشعارات
هنا تقوم بوضع الأشعارات
حسناً