منتديات الأستاذ التعليمية التربوية المغربية : فريق واحد لتعليم رائد

http://www.shy22.com/pngfile/vzb56181.png

السلام عليكم ورحمة الله وبركاته

سنتحدث في درسنا اليوم عن النماذج Forms في لغة برمجة الويب HTML .

النماذج كتعريف :

هي طرق تسمح للمستخدم أو لزائر الموقع بإدخال البيانات
وكمثال عندما تتسجل في موقع و تختار بلدك وعمرك و اسمك و ما إلى ذلك فإنك تقوم بادخال بيانات برمجية معينة.
وطرق إدخال البيانات هذه تتم عن طريق النماذج forms.

http://www.samysoft.net/fmm/fimnew/f.../ertertert.gif

طريقة كتابة النماذج:

نستعمل عادة الوسم form لعمل نموذج ويكون كالتالي:

كود بلغة HTML:

<form>يكتب محتوى النموذج هنا </form>

حيث نضع بين وسمتي الـ form محتوى النموذج
وسندرج طرق الإدخال في الفقرات التالية من درسنا :

http://www.samysoft.net/fmm/fimnew/f.../ertertert.gif

إدخال النصوص input text

بشكل عام لعمل المدخلات نستعمل الوسم input
ويكتب داخل الفورم form ( النموذج ) كما يلي:

كود بلغة HTML:

<form> <input type="النوع"/> </form>

وبدلاً من كلمة النوع في الكود السابق سنضع نوع المدخل
وستتضح لك الأمور بشكل تدريجي ...
نوع مدخل النصوص يسمى text كالتالي:

http://img237.imageshack.us/img237/2...2010070131.png

ويستخدم لإدخال نص من قبل المستخدم
يكتب الكود الذي يؤدي هذا الغرض كما يلي:

كود:

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

http://www.samysoft.net/fmm/fimnew/f.../ertertert.gif

الخاصتان name , id
تستخدمان لتسمية الجزء الذي وضعناه داخل النموذج form لتمييزه عن غيره

مثال :

كود:

<form dir="rtl"> الاسم <input type="text" value="أدخل اسمك هنا" title="fname" id="fname"/> <br/> اسم العائلة <input type="text" value="اسم العائلة هنا" title="lname" id="lname"/> </form>

في المثال السابق لدينا نموذج form وضعنا له الخاصة dir للتحكم بجهته من اليمين إلى اليسار
من أجل اللغة العربية
وداخل هذا الفورم form وضعنا حقل نصي أول كتبنا بجانبه الاسم
ووضعنا له قيمة ابتدائية باستخدام الخاصة value
وسميناه fname
و أعطيناه عنوان fname
و يوجد حقل نصي ثاني كتبنا بجانبه اسم العائلة
وأعطيناه قيمة ابتدائية : اسم العائلة هنا
وسميناه و أعطيناه العنوان lname

ملاحظة :
يمكن التحكم بمساحة حقل الإدخال باستعمال الخاصة size كما يلي:

كود بلغة HTML:

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

http://www.samysoft.net/fmm/fimnew/f.../ertertert.gif

حقول الإدخال لكلمة السر password

مشابهة جداً لما سبق ولكن النوع password
أي أنها أحد أنواع حقول الإدخال input

كود بلغة HTML:

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

ويكون الناتج كما يلي:

http://img832.imageshack.us/img832/8...2010111611.png

وتستخدم هذه الطريقة بدلاً من السابقة في حقول كلمة السر
لكي لا يرى الشخص المجاور لك ما تكتب أو للحماية من بعض برامج التجسس
و الصيغة الكاملة و الأفضل تكون بإضافة الصفتين name , id لحقل الإدخال

http://www.samysoft.net/fmm/fimnew/f.../ertertert.gif

الأزرار buttons

الأزرار في النماذج تعتبر أحد أنواع الادخالات input
ولإنشاء زر نكتب ما يلي:

كود بلغة HTML:

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

ولكن يظهر بدون اسم ولإظهار اسم الزر نستعمل الخاصة value
إذاً بشكل عام الصيغة الكاملة لإنشاء زر تصبح كما يلي:

كود بلغة HTML:

<form> <input type="button" value="اضغط هنا"/> </form>

خانات الاختيار الوحيد Radio Buttons

يبدو أنه لايوجد اسم محدد باللغة العربية لهذا النوع فمنهم من يسميه أزرار الراديو
ومنهم من يسميه حقول الاختيار أو خانات الاختيار الوحيد .

المهم الآن طريقة العمل و الهدف منها:
الهدف هو اختيار قيمة من بين قيم متعددة.

كود بلغة HTML:

<form dir="rtl"> أحمر<input type="radio" name="color" value="red"/><br/> أصفر<input type="radio" name="color" value="yellow"/><br/> أزرق<input type="radio" name="color" value="blue"/><br/> </form>

نتيجة التنفيذ :

http://img825.imageshack.us/img825/7...2010113040.png
لاحظ أنه في داخل النموذج السابق وضعنا الحقول input من نواع الراديو radio
ووضعنا اسم مشترك لهذه الحقول وهو color ولكن وضعنا لكل حقل قيمة value مختلفة
عن الآخر
و الآن عندما تختار مثلاً اللون الأصفر سيتم تحديد الخيار
وعند اختيار لون آخر مثل الأصفر سيزول التحديد الأول و يتم تحديد الأصفر

http://www.samysoft.net/fmm/fimnew/f.../ertertert.gif

الزر من نوع submit

يشبه في الشكل الزر button
و لكنه يستعمل في php لإرسال كافة البيانات التي تم ملؤها في النموذج لصفحة أخرى تقوم بمعالجة البيانات أو نفس الصفحة
صيغة الكتابة:

كود بلغة HTML:

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

حيث يأخذ الاسم Submit Query ( يعني تسليم الاستعلام )
بشكل افتراضي ويمكن أن نضع له اسم آخر باستخدام الخاصة value.

كود بلغة HTML:

<form> <input type="submit" value="إرسال"/> </form>

http://img829.imageshack.us/img829/8...2010115204.png

الآن قد يتساءل السائل أيهما أفضل
أن نستخدم الزر button أم الزر submit
و أنا بحسب معلوماتي المتواضعة و تجاربي أرى أن النوع button يستخدم مع الجافا سكريبت java script و النوع submit يستعمل مع php.

http://www.samysoft.net/fmm/fimnew/f.../ertertert.gif

الزر من نوع Reset

يستخدم لإعادة البيانات الافتراضية في كامل النموذج
الصيغة العامة لكتابته

كود بلغة HTML:

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

مثال يوضح الفكرة:

كود:

 <html> <body>  <h3>راسلنا</h3>  <form action="MAILTO:[email protected]" method="post" enctype="text/plain"> اسمك<br /> <input type="text" name="name" value="your name" /><br /> بريدك الالكتروني<br /> <input type="text" name="mail" value="your email" /><br /> التعليقات<br /> <input type="text" name="comment" value="your comment" size="50" /> <br /><br /> <input type="submit" value="إرسال"> <input type="reset" value="مسح البيانات">  </form> </body> </html>

http://www5.0zz0.com/2012/04/11/17/231051646.png

http://www.samysoft.net/fmm/fimnew/f.../ertertert.gif

تجميع عدة عناصر داخل النموذج في مجموعة
fieldset و legend

يستعمل الوسم fieldset كوسم خارجي و داخله الوسم legend لوضع عنوان للمجموعة
ثم بقية عناصر النموذج

كود بلغة HTML:

<form action=""> <fieldset dir="rtl"> <legend>المعلومات الشخصية</legend> اسمك <input type="text" size="30" /><br /> بريدك الالكتروني <input type="text" size="30" /><br /> تاريخ الميلاد <input type="text" size="10" /> </fieldset> </form>

بالمثال تتضح الأمور:

http://www5.0zz0.com/2012/04/11/17/720013767.png

ملاحظة هامة :

عند تجريب أي تطبيق قم بادراج الأكواد الأساسية
بين الوسوم المعروفة سابقا كما في المثال

كود:

<html>

<body>
 
 أكتب التطبيق هنا وقم بحفظه
 

</body>

</html>

وبهذا نكون قد تكلمنا عن بعد تطبيقات النماذج
و أتمنى أن أكون قد وفقت في الشرح والتبسيط .

http://img6.imageshack.us/img6/3674/112de4.gif

http://www.samysoft.net/fmm/fimnew/f.../ertertert.gif

تحياتي الخالصة للجميع.