دورة تعلم لغة HTML – الدرس 10 الى 14 – النماذج في html

يدور محور هذا الدرس حول النماذج  input control في HTML حيث ستعرف على :

• • النماذج input control : وهي طرق تسمح للمستخدم أو الزائر بإدخال بيانات للموقع
  • التعرف على أشكال النماذج و أساسياتها وطرق كتابة الوسوم وخصائصها
  • التعرف على طريقة كتابة النماذج حيث نستعمل عادة الوسم form لعمل نموذج ويكون كالتالي:

  <form>

  محتوى النموذج هنا

  </form>

  • الفائدة الحقيقية للنماذج تكون مع لغة ,php ,asp.net JavaScript حيث يمكن من خلالها معالجة البيانات التي يتم إدخالها

• أنواع النماذج input control في HTML

o حقل النص text box

o حقل كلمة المرور password

o حقل النص label

o حقل الرقم number

o أزرار الراديو radio buttons

o حقل التاريخ date

o مربعات الاختيار checkboxes

o القوائم المنسدلة drop-down menus

o زر التحكم “الادخال” button

• تجميع عدة عناصر داخل النموذج بواسطة fieldset and legend elements

الفيديو 1 وهو مقدمة للحديث عن النماذج وفائدتها

الفيديو 2 سنتعرف به على:

•  على حقل النص text box و حقل كلمة المرور password وبعض خصائصها:

o القيمة الابتدائية value

o الاسم البرمجي name , id

o التحكم بمساحة حقل الإدخال size

• التعرف على حقل النص label

ربط عنصر النص label   مع العنصر textbox  وبقية ازرار التحكم

الفيديو 3 سنتعرف به على:

• التعرف على خانات الاختيار الوحيد Radio Buttons

o يجب بل “من الضروري” أن نضع اسم مشترك لهذه الخانات name  و قيم متعددة value

• التعرف على خانات الاختيار المتعدد checkbox وبعض خواصها

o يجب وضع اسم مشترك لهذه الخانات name  و قيم متعددة value

الفيديو 4 سنتعرف به على:

• التعرف على مساحة النص الطويل textarea

يمكن التحكم في أبعاد الحقل باستخدام الخاصتين

rows  للارتفاع ( أو عدد الأعمدة )

cols   للعرض ( أو عدد الصفوف

• التعرف على عنصر الرقم number وهو عنصر شبيه بعنصر النص textbox الا انه يمكن ادخال ارقام فقط بداخله

لتحديد الحد الادنى للادخال min

لتحديد الحد الاعلى للادخال max

• التعرف الأزرار button , submit , reset والفرق بينهم

الفيديو 5 سنتعرف به على:

• التعرف على القوائم المنسدلة drop-down menus

o تستخدم لعمل قائمة تحوي عدة قيم بحيث نختار قيمة منها

o نستخدم لعمل قوائم الاختيار select , option

o التعرف على الخاصية selected

o التعرف على optgroup لعمل مجموعات ضمن القائمة

• التعرف على حقل التاريخ date
• تجميع عدة عناصر داخل النموذج بواسطة fieldset and legend elements