الدرس العاشر -النماذج
النماذج :
يتم استخدام النماذج لإدخال البيانات وارسالها لإجراء العمليات عليها او حفظها في قاعدة البيانات
توضيح :
مثال :
هذا مثال لفورم بسيط به خانة نصية لإدخال الاسم ونص اخر للعنوان وبه زر لإرسال البيانات او حفظها
<form> <button>Send </button> |
طريقة عمل النموذج :
يتم ارسال هذه البيانات بواسطة خاصية في وسم الفورم اسمها Action بها الصفحة التي سوف تستقبل البيانات
وغالبا ما تكون الصفحة التي تستقبل البيانات مكتوبة بلغة برمجة علي الخادم مثل php –asp-python-
<*form action="action_page.php">
نقوم بشرح عناصر الفوم
الوسم <form> الفريم الذي يكون بداخلة عناصر الادخال والارسال
الوسم <input> عبارة عن نص ادخال البيانات
الوسم <label> هو عنصر لتسمية العناصر وايضا لعرض البيانات التي لا تقبل التعديل
الوسم <button> عنصر ارسال البيانات
بعض أنواع الوسم <input> :
<input type="text"> نص
<input type="radio"> زر خيارات
<input type="submit"> زر ارسال
<input type="checkbox"> زر اختيار متعدد
<input type="color"> نوع ادخال يعرض صندوق الألوان ويتم فيه اختيار لوان
<input type="date"> عنصر لعرض التاريخ
وسوم طرق الارسال في النموذج :
تستخدم الخاصية method مع الفورم لتحديد طريقة الارسال باستخدام احد الدوال التالية :
<*form action="action_page.php" method ="get">
<*form action="action_page.php" method ="POST">
الفرق بين الطريقتين (GET-POST)
تستخدم GET عند ارسال بيانات غير مهمة لان البيانات المرسلة بواسطة get تظهر في المتصفح مع شريط العنون مع اسم الصفحة وهذا الطريقة لا تسمح بإرسال بيانات ذات حجم كبير (2048 حرف )
/action_page.php?firstname=John&adress=London
هكذا تظهر البيانات عند استخدام get .
اما post في الغالب تستخدم مع البيانات المهمة مثل ارسال اسم المستخدم وكلمة المرور لانها لا تظهر عند الارسال
تقبل ارسال أي حجم من البيانات .
الخاصية Name :
تستخدم مع عناصر html لإعطاء اسم لكل عنصر وتستخدم في الفوم عند ارسال البيانات يتم استقبالها علي حسب الاسم .
الخاصية Value :
تحدد قيمة العنصر
<*form> <*button>Send <*/button> |
الوسم <select> القائمة المنسدلة :
هو احد وسوم الادخال في النماذج يقوم بعرض مجموعة من البيانات في شكل قائمة منسدلة للاختيار بينها
<*select id="cars" name="cars">
<*option value="volvo">Volvo<*/option>
<*option value="toyota"> toyota <*/option>
<*option value="fiat">Fiat<*/option>
<*option value="audi">Audi<*/option>
<*/select>