2012-04-11, 17:18
|
رقم المشاركة : 1 |
 إحصائية
العضو | | | 
|  الدرس (9) النماذج بلغة HTML
|  |
 السلام عليكم ورحمة الله وبركاته
سنتحدث في درسنا اليوم عن النماذج Forms في لغة برمجة الويب HTML .
النماذج كتعريف :
هي طرق تسمح للمستخدم أو لزائر الموقع بإدخال البيانات
وكمثال عندما تتسجل في موقع و تختار بلدك وعمرك و اسمك و ما إلى ذلك فإنك تقوم بادخال بيانات برمجية معينة.
وطرق إدخال البيانات هذه تتم عن طريق النماذج forms.
طريقة كتابة النماذج: نستعمل عادة الوسم form لعمل نموذج ويكون كالتالي: كود بلغة HTML: <form>يكتب محتوى النموذج هنا </form> حيث نضع بين وسمتي الـ form محتوى النموذج
وسندرج طرق الإدخال في الفقرات التالية من درسنا : إدخال النصوص input text بشكل عام لعمل المدخلات نستعمل الوسم input
ويكتب داخل الفورم form ( النموذج ) كما يلي: كود بلغة HTML: <form> <input type="النوع"/> </form> وبدلاً من كلمة النوع في الكود السابق سنضع نوع المدخل
وستتضح لك الأمور بشكل تدريجي ...
نوع مدخل النصوص يسمى text كالتالي:  ويستخدم لإدخال نص من قبل المستخدم
يكتب الكود الذي يؤدي هذا الغرض كما يلي:
كود: <form> <input type="text"/> </form>
الخاصتان 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> حقول الإدخال لكلمة السر password مشابهة جداً لما سبق ولكن النوع password
أي أنها أحد أنواع حقول الإدخال input كود بلغة HTML: <form> <input type="password" /> </form> ويكون الناتج كما يلي:  وتستخدم هذه الطريقة بدلاً من السابقة في حقول كلمة السر
لكي لا يرى الشخص المجاور لك ما تكتب أو للحماية من بعض برامج التجسس
و الصيغة الكاملة و الأفضل تكون بإضافة الصفتين name , id لحقل الإدخال الأزرار 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> نتيجة التنفيذ :
لاحظ أنه في داخل النموذج السابق وضعنا الحقول input من نواع الراديو radio
ووضعنا اسم مشترك لهذه الحقول وهو color ولكن وضعنا لكل حقل قيمة value مختلفة
عن الآخر
و الآن عندما تختار مثلاً اللون الأصفر سيتم تحديد الخيار
وعند اختيار لون آخر مثل الأصفر سيزول التحديد الأول و يتم تحديد الأصفر الزر من نوع submit
يشبه في الشكل الزر button
و لكنه يستعمل في php لإرسال كافة البيانات التي تم ملؤها في النموذج لصفحة أخرى تقوم بمعالجة البيانات أو نفس الصفحة
صيغة الكتابة: كود بلغة HTML: <form> <input type="submit"/> </form> حيث يأخذ الاسم Submit Query ( يعني تسليم الاستعلام )
بشكل افتراضي ويمكن أن نضع له اسم آخر باستخدام الخاصة value. كود بلغة HTML: <form> <input type="submit" value="إرسال"/> </form>  الآن قد يتساءل السائل أيهما أفضل
أن نستخدم الزر button أم الزر submit
و أنا بحسب معلوماتي المتواضعة و تجاربي أرى أن النوع button يستخدم مع الجافا سكريبت java script و النوع submit يستعمل مع php. الزر من نوع 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>
 تجميع عدة عناصر داخل النموذج في مجموعة
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>
بالمثال تتضح الأمور:  ملاحظة هامة :
عند تجريب أي تطبيق قم بادراج الأكواد الأساسية بين الوسوم المعروفة سابقا كما في المثال كود: <html>
<body>
أكتب التطبيق هنا وقم بحفظه
</body>
</html> وبهذا نكون قد تكلمنا عن بعد تطبيقات النماذج
و أتمنى أن أكون قد وفقت في الشرح والتبسيط .  تحياتي الخالصة للجميع. |
: منتديات الأستاذ التعليمية التربوية المغربية : فريق واحد لتعليم رائد https://www.profvb.com/vb/showthread.php?p=547292 آخر تعديل ExtrA يوم 2012-04-11 في 17:38. |
|
|  |
فعاليات صيف 2011 على منتديات الأستاذ :
مسابقة استوقفتني آية
|
ورشة : نحو مفهوم أمثل للزواج
