استثمر للحياة

مواضيعنا

النماذج في HTML

حجم الخط

investolife

تكمن صعوبة التعامل مع النماذج في كونها – رغم انتمائها لـ HTML – الا ان استخدامها يكون مرتبط  بلغة برمجة مثل  php أو  javascript  ... و هذا ما يجعلها تختلف عن باقي وسوم  HTML. يعني

بالبلدي ......سنتعرف على أشكال النماذج  و كيفية تصميمها  . ولكن لنستفيد منها لابد من تعلم لغة برمجة مثل  php أو javascript   حيث يمكن من خلالها معالجة البيانات التي يتم إدخالها .

راجع ايضاً النماذج   ( FORMS)   و  تمرير المدخلات

اسلثمر للحياةما هي النماذج . ( FORMS) :

و هو عبارة عن صفحة تظهر على المتصفح , و تقبل إدخال بيانات بها من قبل المستخدم  . فمثلاً عند  شراء كتاب من الانترنت أو عندما  تقوم بإنشاء بريد الكتروني  أو التسجيل بموقع ما  , يتوجب عليك ان تقوم بتعبئة نموذج التسجيل , الذي يتضمن – عادة - الاسم وكلمة المرور وبريدك الالكتروني   , كل هذا نقوم عمله عن طريق النماذج  FORMS .

انواع مدخلات النماذج

  •  صندوق الكتابة ( text)

  •  كلمة المرور ( password)

  •  حقل النصوص ( textarea)

  •  الاختيار الأحادي ( radio)

  •  الاختيار المتعدد  ( check box) asdf

  •  قائمة الاختيار ( select)

  •  زر الارسال  ( submit)

  • اسلثمر للحياة

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

نستعمل الوسم< form >  لعمل النموذج    :

ثم نضيف أوامر الإدخال حسب رغبتنا .... و القاعدة العامة لكتابة أوامر الادخال هي

استثمر للحياة

أولاً : إدخال النصوص  input text  مثل الاسم ... اسم الشارع .... و غيرها .

استثمر للحياة

فأذا قمنا بتنفيذ الكود السابق سنجد الصفحة بها صندوق  فارغ   يمكن الكتابة بداخله .....و لكن ماذا يكتب المستخدم ؟! علينا بتنبيه بوضع معرف لهذا الصندوق .... و ليكن الاسم مثلا فيصبح الكود

استثمر للحياة

ملحوظة : يمكن تحويل الشاشة من اليمين لليسار بأن نكتب     <form dir="rtl">

ثانياً : حقل إدخال كلمة السر    password
هو نفس ما سبق لكن النوع    TYPE=” password”

استثمر للحياة

كيف تظهر شاشة المتصفح :

Your Name Is
Your Password

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

 

 

 ويمكننا تحديد حجم الصندوق  بواسطه  تحديد الصفوف بالخاصية الإضافية    rows والأعمدة بالخاصية الإضافية   cols   فيصبح الكود السابق كالاتي :

استثمر للحياة

كيف تظهر شاشة المتصفح :

اكتب رسالة

 

رابعاً : الاختيار الأحادي  " أزرار راديو "    Radio Buttons

و هي تسمح للمستخدم أن يختار أحد الخيارات فقط من مجموعة اختيارات محددة  وهذه  قاعدته العامة و مثال عليه  :استثمر للحياة

كيف تظهر شاشة المتصفح :

ذكر

أنثى

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


أكرر ....  داخل النموذج السابق وضعنا الحقول input من نواع الراديوradio. ووضعنا اسم مشترك لهذه الحقول وهو male  ولكن وضعنا لكل حقل قيمة value مختلفة  عن الآخر . و لهذا حكمة فعندما يختار المستخدم أنثى  – مثلاً -  سيتم تحديد الخيار , سيزول التحديد تلقائياً عن ذكر .  وهذا الفرق الجوهري بين  radio و  checkbox  .



خامساً : حقول  الاختيار المتعدد checkbox

مثال : نفرض اننا نسأل المستخدم عن إحدى هواياته ( القراءة أم السباحة أم الجري ) مثلاً .... هنا لابد ان نسمح له باكتر من خيار فربما يكون له أكثر من هواية . هذا الأمر يستلزم استخدام حقول  الاختيار المتعدد checkbox

استثمر للحياة

 

كيف تظهر شاشة المتصفح :

القراءة  السباحة   الجري 

سادساً : قوائم الاختيارselect , option

وتستخدم لعمل قائمة تحوي عدة قيم مكتوبة مسبقاً , و يقوم المستخدم  بإختيار قيمة منها واحدة أو أكثر  . و القاعدة العامة له توضحها الامثالة :
النوع الاول : اختيار شيء واحد فقط

استثمر للحياة

النتيجة:

غير ان هناك مشكلة و هي فى حالة اختيارك ما يبقى اسمها موجود فى الصندوق . و لحل هذه المشكلة نستخدم الخاصية الإضافية  selected لوضع القيمة الافتراضية لقائمة الاختيار . مثال

استثمر للحياة

النوع الثاني : اختيار اكثر من شيئ في وقت واحد

يمكننا أن  نختار اكثر من قيمة فنضع الامر multiple  و الذي يمكنا من التظليل على عدة قيم بالضغط على مفتاح  ctrl

مثال

استثمر للحياة

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

استثمر للحياة

النتيجة:

استثمر للحياة

لاحظ كيف تم وضع إطار حول المعلومات


وضع الخيارات في مجموعات
يمكن تجيمع كل عدة خيارات في مجموعة من أجل التوضيح على الزائر للموقع باستخدام الوسم optgroup داخل الوسم select  حيث توضع الوسوم option داخل optgroup
مثال:

استثمر للحياة

النتيجة:

استثمر للحياة

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

استثمر للحياة

النتيجة :

ولكنه يظهر بدون عنوان  ولإظهار عنوان  الزر  علينا ان نضيفة  الخاصية     value بحيث يوضح عمل الزر .


الزر من نوع  submit

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

استثمر للحياة

الزر من نوع  Reset

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

استثمر للحياة

تابع باقى أنواع الأزرار و ايضاً النماذج   ( FORMS)   و  تمرير المدخلات

 

الموضوع  :  النماذج في HTML المرجع : استثمر للحياة  investolife 

اعلان تجاري
اعلان 468