دورة تعلم لغة 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

اترك تعليق

Please enter your comment!
Please enter your name here