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

منتديات الأستاذ التعليمية التربوية المغربية : فريق واحد لتعليم رائد (https://www.profvb.com/vb/)
-   الدورة التكوينية: أساسيات لغة HTML وتطبيقاتها (https://www.profvb.com/vb/f354.html)
-   -   الدرس (9) النماذج بلغة HTML (https://www.profvb.com/vb/t94702.html)

ExtrA 2012-04-11 17:18

الدرس (9) النماذج بلغة HTML
 

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

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



jawadjordi 2012-04-11 18:21

رد: الدرس (9) النماذج بلغة html
 
http://t7di-book.net/upload/learning-difficulties.jpg

الدروس الأولين كانو سويهلين
اليوم راه راسي طبخ ليا
ههههههههه
شكرا على الدرس الشيق
سؤال : عند ملأ النموذج و القيام بعملية الإرسال من المفروض أن هناك قاعدة معطيات أو ملف لتسجيل المعلومات المرسلة ,أليس كذلك ؟


أم سهام 2012-04-11 19:10

رد: الدرس (9) النماذج بلغة html
 
حتى أنا بديت كاندوخ.ههههههههههههههه
يالاه درت هاد شوية:
http://cf.profvb.com/do.php?id=797

أبو هاجر و رميساء 2012-04-11 19:14

رد: الدرس (9) النماذج بلغة html
 
شكون عندو شي كينة ديال الراس إعتقني بها
راه راسي بغا انفاجر

العلم 2012-04-11 19:23

رد: الدرس (9) النماذج بلغة html
 
شكرا أستاذي

هذا تطبيقي لدرس اليوم


http://img710.imageshack.us/img710/3797/formsol.jpg

الشريف السلاوي 2012-04-11 19:41

رد: الدرس (9) النماذج بلغة html
 
شكرا جزيلا و بارك الله فيك أخي الفاضل .

abouimane 2012-04-11 20:30

رد: الدرس (9) النماذج بلغة html
 
1 مرفق
تم بعون الله

جزاك الله خيرا

سلاميــ



أم سهام 2012-04-11 22:00

رد: الدرس (9) النماذج بلغة html
 
http://cf.profvb.com/do.php?id=804

salim-x 2012-04-11 22:38

رد: الدرس (9) النماذج بلغة html
 
قمت بمحاولة للتطبيق الدرس التاسع
http://cf.profvb.com/do.php?id=806
مع الشكر والتقدير للأخ اكسترا


http://www9.0zz0.com/2012/04/11/22/594406202.jpg

ExtrA 2012-04-11 23:29

رد: الدرس (9) النماذج بلغة html
 
اقتباس:

المشاركة الأصلية كتبت بواسطة jawadjordi (المشاركة 547327)
http://t7di-book.net/upload/learning-difficulties.jpg

الدروس الأولين كانو سويهلين
اليوم راه راسي طبخ ليا
ههههههههه
شكرا على الدرس الشيق
سؤال : عند ملأ النموذج و القيام بعملية الإرسال من المفروض أن هناك قاعدة معطيات أو ملف لتسجيل المعلومات المرسلة ,أليس كذلك ؟



هههههههههههههههه
حتى أنا تبخ ليا راسي
بالنسبة للتطبيق فهو يمثل فقط النموذج الظاهر في الموقع و لنجاحه لابد من توفر قاعدة بيانات يتم فيها تخزين المعطيات في السرفر .
وهذا موضوع طويل ويحتاج للبحث
راه هادشي اللي شفنا لا يمثل سوى جزء و احد من المليار ف Html
وشوية بشوية الانسان غايولي محترف.
بارك الله فيك وشكرا على حسن الاهتمام و المتابعة
تحياتي

ExtrA 2012-04-11 23:34

رد: الدرس (9) النماذج بلغة html
 
اقتباس:

المشاركة الأصلية كتبت بواسطة salim-x (المشاركة 547427)
قمت بمحاولة للتطبيق الدرس التاسع
http://cf.profvb.com/do.php?id=806
مع الشكر والتقدير للأخ اكسترا


http://www9.0zz0.com/2012/04/11/22/594406202.jpg

ممتاز أخي سليم سلمت يداك
متابعة جيدة و أداء رائع
أشكرك جزيل الشكر وأتمنى لك التوفيق و السداد.


ExtrA 2012-04-11 23:37

رد: الدرس (9) النماذج بلغة html
 
اقتباس:

المشاركة الأصلية كتبت بواسطة habiba4 (المشاركة 547411)


ممتازة أختي الكريمة
وفقك الله و سدد خطاك وأشكرك على المتابعة والاهتمام
تحياتي الخالصة


oujdi 2012-04-11 23:37

رد: الدرس (9) النماذج بلغة html
 
1 مرفق
شكرا أخي إكسترا على هذا الدرس القيم و الغني
تطبيقي مع المرفقات
و هذه صورة له

http://img15.hostingpics.net/pics/68...0412013255.gif

ExtrA 2012-04-11 23:40

رد: الدرس (9) النماذج بلغة html
 
اقتباس:

المشاركة الأصلية كتبت بواسطة achrafmalki (المشاركة 547342)
شكون عندو شي كينة ديال الراس إعتقني بها
راه راسي بغا انفاجر


ههههههههههههه
أضحك الله سنك
راه كولا حاجة بثمانها
الله يحفظك أسي أشرف واقيلا نحبس هنا .الله يجعل الباراكا
تحياتي أسي أشرف
شكرا جزيلا لك.

ExtrA 2012-04-11 23:42

رد: الدرس (9) النماذج بلغة html
 
اقتباس:

المشاركة الأصلية كتبت بواسطة العلم (المشاركة 547345)
شكرا أستاذي

هذا تطبيقي لدرس اليوم


http://img710.imageshack.us/img710/3797/formsol.jpg

ممتاز جدا تنظيم جيد ومتابعة أقل مايقال عنها أنها في المستوى
لك مني أغلى تحية وتقدير

ExtrA 2012-04-11 23:45

رد: الدرس (9) النماذج بلغة html
 
اقتباس:

المشاركة الأصلية كتبت بواسطة oujdi (المشاركة 547443)
شكرا أخي إكسترا على هذا الدرس القيم و الغني
تطبيقي مع المرفقات
و هذه صورة له

http://img15.hostingpics.net/pics/68...0412013255.gif

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

ExtrA 2012-04-12 01:18

رد: الدرس (9) النماذج بلغة html
 
اقتباس:

المشاركة الأصلية كتبت بواسطة abouimane (المشاركة 547378)
تم بعون الله

جزاك الله خيرا

سلاميــ




بارك الله فيك أخي الكريم

أم سهام 2012-04-12 10:28

رد: الدرس (9) النماذج بلغة html
 
http://cf.profvb.com/do.php?id=808

أم سهام 2012-04-12 10:49

رد: الدرس (9) النماذج بلغة html
 
http://cf.profvb.com/do.php?id=809

عمر أبو صهيب 2012-04-12 20:08

رد: الدرس (9) النماذج بلغة html
 
1 مرفق
هذا تطبيق الدرس التاسع :
http://img198.imageshack.us/img198/7875/86310776.jpg
و هذه نتيجة التطبيق :
http://img217.imageshack.us/img217/4687/55688800.jpg
و الملف في المرفقات

Aterta70 2012-04-12 22:05

رد: الدرس (9) النماذج بلغة html
 
جزاك الله خيرا على هذه الدورة القيمة

أسيلة 2012-04-13 15:34

رد: الدرس (9) النماذج بلغة html
 
شكرا اخي جزاك الله خيرا

الزرقاء 2012-04-16 19:30

رد: الدرس (9) النماذج بلغة html
 
1 مرفق
وأخيرا هذا تطبيقي


من الصباح وانا مقاتلة (ههههه على هاد شوية)

بوركت اخي إكسترا

http://img832.imageshack.us/img832/9171/49847354.jpg


أبو هاجر و رميساء 2012-04-16 20:17

رد: الدرس (9) النماذج بلغة html
 
اقتباس:

المشاركة الأصلية كتبت بواسطة الزرقاء (المشاركة 549694)
وأخيرا هذا تطبيقي


من الصباح وانا مقاتلة (ههههه على هاد شوية)

بوركت اخي إكسترا

http://img832.imageshack.us/img832/9171/49847354.jpg


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


فطيمة الزهرة 2012-04-17 10:50

رد: الدرس (9) النماذج بلغة html
 
قولولي باقيين كطبقو وأنا حسبلي الوقت انتهى
هههههههه
إذن ستناوني حتى نزل تطبيقي أنا الأخرى

الزرقاء 2012-04-17 12:29

رد: الدرس (9) النماذج بلغة html
 


اقتباس:

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

اقتباس:

قولولي باقيين كطبقو وأنا حسبلي الوقت انتهى
هههههههه
إذن ستناوني حتى نزل تطبيقي أنا الأخرى


ههههههه
ماغادين فين حدنا هنا

سحابلي بوحدي السلحفاة ساعة كايينين الخوت والخواتات بحالي

الله يوفق

وتحية كبيرة لأستاذنا إكسترا

مودتي


oujdi 2012-04-17 12:46

رد: الدرس (9) النماذج بلغة html
 
اقتباس:

المشاركة الأصلية كتبت بواسطة الزرقاء (المشاركة 549694)
وأخيرا هذا تطبيقي
من الصباح وانا مقاتلة (ههههه على هاد شوية)
بوركت اخي إكسترا

http://img832.imageshack.us/img832/9171/49847354.jpg


جهد أثمر عملا جميـــــــــــلا
و أكيد تستحقين بفضله إعادة النظر في جدول التقييم الموجود هنا
بشأن تقييم دورة:أساسيات لغة html و تطبيقاتها
وذلك قبل أن يضيف أخي إكسترا تقييمه النهائي
:) :)

الزرقاء 2012-04-17 13:14

رد: الدرس (9) النماذج بلغة html
 
اقتباس:

المشاركة الأصلية كتبت بواسطة oujdi (المشاركة 549998)
جهد أثمر عملا جميـــــــــــلا
و أكيد تستحقين بفضله إعادة النظر في جدول التقييم الموجود هنا
بشأن تقييم دورة:أساسيات لغة html و تطبيقاتها
وذلك قبل أن يضيف أخي إكسترا تقييمه النهائي
:) :)

شكرا أستاذ وجدي على التنبيه


لم أنتبه للموضوع أعلاه


بوركت جهودك

تقديري

فطيمة الزهرة 2012-04-17 15:26

رد: الدرس (9) النماذج بلغة html
 
هذا تطبيقي للدرس التاسع


http://img15.hostingpics.net/pics/316743SORATTATBIK.gif

الزرقاء 2012-04-17 15:31

رد: الدرس (9) النماذج بلغة html
 
اقتباس:

المشاركة الأصلية كتبت بواسطة فطيمة الزهرة (المشاركة 550074)
هذا تطبيقي للدرس التاسع


http://img15.hostingpics.net/pics/316743SORATTATBIK.gif

تبارك الله عليك،موفقة دوما بحول الله

oujdi 2012-04-17 16:35

رد: الدرس (9) النماذج بلغة html
 
مرحبا بك أختي فطيمة الزهرة و مرحبا بتطبيقك
منين خرجتولي انت و الزرقاء؟؟؟
أنا قلت الحمد لله كملت مع الحسابات و الجداول
هههههههههه
سأصحح الجدول الخاص بالتقييم : المعيار 3 و المعيار 4
الله يكون في عوني
هههه


ExtrA 2012-04-22 15:41

رد: الدرس (9) النماذج بلغة html
 
بارك الله فيكم جميعا
مجهودات جبارة تنم عن دقة التنظيم وجودة الأداء
لكم مني تحية أخوية صادقة



الساعة الآن 10:20

جميع المواد المنشورة بالموقع تعبر عن أصحابها فقط ولا تعبر بأي شكل من الأشكال عن رأي الموقع ولا يتحمل أي مسؤولية عنها

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd