النماذج

 تعتبر النماذج من المواضيع المتقدمة في لغة الـ html وهي مهمة جداً للتفاعل بين الموقع وزواره فمثلاً تحتاج كصاحب موقع أن تعرف اراء زوار موقعك في مسائل معينة فتحتاج إلى نموذج أستبيان تقدمه لهم ، ومن ابرز الأمثلة على النماذج في مواقع الويب هي دفاتر الزوار ومحركات البحق .

وما تختلف فيه وسوم التماذج عن غيرها إنها تتداخل مع لغات برمجة متقدمة مثل CGI و java Script .

الوسوم الخاصة بالجداول مهما اختلفت تكون محصورة بين

<form > ''''''''''''</form>

خصائص النماذج

ACTION

وهو يحدد العنوان الذي سيتم إرسال النمةذج إليه وعادة يكون عنوان بريد إلكتروني وقد يكون عنواناص لبرنامج CGI موجود على على الخادم server الذي تتواجد عليه الصفحة حيث يستقبل البيانات ويعالجها حسب التعليمات الموجودة فيه كأن يضيفها لأحد الصفحات مثل سجل الزوار أ ويتحق من صحة بعض الحقول المدخلة ومطابقتها لمعايير معينة أ وأن يقو مبالبحث عن كلمة أ وعبارة ضمن صفحات الموقع

مثال : form action="mailto:alnor25@hotmail.com">...........</form>

<form action="CGI script"> ''''''''''''</form>

METHOD

وهذه الخاصية تحدد الطريقة التي سيتم التعامل مع العنوان المحدد في الخاصية السابقة ولهذه الخاصية قيمتين هما GET التي تستخدم في حال كون عملية المعالجة داخلية أي تتم داخل الخادم server ، والقيمة الثانية هي post وتستخدم عندما تكون عملية المعالجة خارجية كأن يتم إرسال البيانات إلى عنوان بريد إلكتروني .

مثال : form action="mailto:alnor25@hotmail.com"method="post">...........</form>

<form action="CGI script"method="get"> ''''''''''''</form>

ENCTYPE

هذه الخاصية تحدد طريقة الترميز التي سيتم وفقاً لها . وهي تأخد القيمتين التاليتين :

application/x-www-form-urlencoded

text/plain

والقيمتين التاليتين تحدد طبيعة المعالجة التي ستجري على البيانات أ وطبيعة برنامج البريد الإلكتروني الذي سيستقبل هذه البيانات إذا كان يدعم لغة hhtml ام لا والفرق بين القيمتين يوضحه المثال التالي عند استخدام القيمتين text/plain ستصل البيانات مرتبة عمودياً كما ياتي

name= alnor site
address=kas- qatif
email= alnor25@hotmail.com

أما عند استخدام application/x-www-form-urlencoded فستصل البيانات بالشكل التالي :

name= alnor site&address=kas- qatif&email= alnor25@hotmail.com

وطبعاً من الصعوبة تحليل السطر السابق خاصةً إذا كان يحتوي على عشرات الحقول

الوسم INPUT

يستخد الوسم <INPUT > اتعريف أشكال البيانات في النماذج وإليك المثال التالي

<form
<input type="text">
</form>

االخاصية الاولى المستخدمة مع input هي type وهي تأخد القيم التالية

شرح حقل النص text :

الخاصية الثانية المستخدمة مع INPUT هي name وتستخدم لتسمية حقل البيانات مثال

<form
<p>ضع اسمك هنا ; <input type="text" name</p>
</form>

النتيجة سوف تكون بالشكل التالي

وعند الرغبة في تعيين عبارة افتراضية فيمكن إظهارها من خلال الخاصية value ليصبح المثال السابق كما يلي :

<form
<p>ضع اسمك هنا ; <input type="text" name value="alnor site"</p>
</form>

وسوف تكون بالشكل التالي

ولتحديد حجم الحقل نستخدم الخاصية size مع الرقم الذي نريد وسوف نطبقها علىا لمثال السابق ليصبح كالتالي

<form
<p>ضع اسمك هنا ; <input type="text" name value="alnor site"size="30"</p>
</form>

شرح حقل الرقم السري password :

وهو يشبه حقل النص TEXT من حيث الخصائص تماماً والأختلاف ان مدخلات حقل الرقم السري تظهر عل ىشكل ******** وهو يستخدم عندما تكون هناك حاجة لإدخال كلمة سر من قبل الزائر في النموذج 00 مثال :

<form
<p>ضع رقمك السري ; <input type="password" name "size="30"</p>
</form>

ملاحظة هامة يفضل وضع الحقل داخل جدول .

مثال عام على ما سبق :

<form...>
<table border="0">
<tr>
<td>ضع أسمك هنا </td>
<td><input type="text" name value="alnor site"size="30" </td>
</tr>
<tr>
<td>ضع رقمك السري هنا </td>
<td><input type="password" name size="30"</td>
</tr>
</table>
</form>

تفسير المثال السابق :

إذا تفسيرك للمثال السابق يمثل نمودج لنص يطالب بإدخال اسم وفيه عبارة افتراضية وهي alnor site وهناك صف ثاني لإدخال الرقم السري وطول كلا النموذجين يساوي 30 وموضوعان في داخل جدول . إذا كان هذا تفسيرك فأحسنت وإلى الأمام .

خاصية radio

وهو يستخدم لختيار إجابة واحدة من عدة خيارات ، وهو ياخد الشفرة التالية

<form >
<input type="radio">
</form>

خاصية checkbox

والختلاف بين هذه الخاصية وسابقتها إنه يمكنك هنا أختيار عدة خيارات وهو ياخد الشفرة التالية :

<form >
<input type="checbox">
</form>

قوائم الأختيار :

نستخدم الوسمان التاليان لأنشاء هذه القوائم وهما <select/>..... </select> و <option> ....... </option>

مثال :

<form >
<select>
<option>واحة القطيف
</select>
</form>

وسوف تكون النتيجة كالتالي :

ويمكن تحدديد ارتفاع القائمة وسوف نجعله اثنان فقك كالتالي

<form >
<select size="2">
<option>النور الإسلامي
<option>النور العام
<option>النور الشامل
<option>النور منكم وإليكم
<option>
</select>
</form>

وسوف تكون النتيجة كالتالي :

كتابة التعليقات :

ولكتابة التعليقات نستخدم الشفرة التالية 

<textarea>
اكتب تعليقك هنا
</textarea>

وسوف تكون النتيجة كالتالي

استلام الرسالة supmite : ويتم بكتابة الشفرة التالية :

<form >
<input type="استلام ">
</form>

ويكون بالشكل التالي :

ولمسح ما تم كتابته نكتب الشفرة التالية

<form >
<input type="مسح" >
</form>

ويكون بالشكل التالي :