النماذج :

يتم استخدام النماذج لإدخال البيانات وارسالها لإجراء العمليات عليها او حفظها في قاعدة البيانات

 

توضيح :

 

مثال :

هذا مثال لفورم بسيط به خانة نصية لإدخال الاسم ونص اخر للعنوان وبه زر لإرسال البيانات او حفظها

 

<form>   <label >First name:</label><br>   <input><br>   <label>Address:</label><br>   <input ><br> <button>Send </button> </form>

 

طريقة عمل النموذج :

 

يتم ارسال هذه البيانات بواسطة خاصية في وسم الفورم اسمها 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>   <*label >First name:<*/label><*br>   <*input name ="fname" value="ali"><*br>   <*label>Address:<*/label><*br>   <*input name ="address" value="london"><*br> <*button>Send <*/button> <*/form>

 

الوسم <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>