النماذج عند الانتهاء من هذا الدرس ستكون قادرا على: إنشاء نموذج HTML بشكل صحيح. استخدام جميع عناصر النموذج بشكل صحيح.

النماذج هي: تتكون النماذج من حقول يستطيع زائر الموقع تعبئتها ببياناته وإرسال هذه البيانات للموقع. فالنماذج هدفها إتاحة إمكانية الكتابة لزوار مواقع الانترنت.

** إنشاء النماذج: <form> </form> بين هذين الوسمين يتم إدراج وسوم حقول النموذج الأخرى ويحتوي الوسم <form> على خاصتين هما : <form action=" " method=" " > العنوان الذي سيتم إرسال بيانات النموذج له تستخدم لتحديد طريقة إرسال بيانات النموذج

** إنشاء مربع نص: لإضافة مربع نص من سطر واحد نستخدم : > name=" " size=" " <input type="text" لإضافة مربع نص لإدخال كلمة سر نستخدم : > name=" " size=" " <input type="password" حجم الحقل بالبكسل اسم الحقل ( لا يظهر في الصفحة ) حجم الحقل بالبكسل اسم الحقل ( لا يظهر في الصفحة )

لإضافة مربع نص من عدة أسطر نستخدم : <textarea name=" " cols=" " rows=" "> يتم كتابة النص الافتراضي بحيث يكون موجود في مربع النص عند تحميل الصفحة </textarea> عرض مربع النص ويعبر عنه بعدد الأعمدة عرض مربع النص ويعبر عنه بعدد الأعمدة

مثال على تطبيق مربعات النص

إنشاء أزرار الخيار ومربعات العلامة : لإضافة أزرار الخيار نستخدم : <input type="radio" name=" " value=" " > لإضافة مربعات العلامة نستخدم : <input type="checkbox" name=" " value=" " > القيمة (لا تظهر في الصفحة) الاسم ( لا يظهر في الصفحة )

لإضافة قائمة منسدلة نستخدم : <select name=" "> <option value=" "> يتم كتابة العنصر الأول في القائمة </option> </select> ملاحظة : يتم تكرار وسم > <option حسب عدد عناصر القائمة . اسم القائمة ( لا يظهر في الصفحة )

إنشاء أزرار الإرسال والمسح : لإضافة زر إرسال نستخدم : <input type=" submit" value=" "> لإضافة زر مسح نستخدم : <input type=" reset" value=" "> اسم اختياري للزر مثلا (للتسجيل ، إرسال ، موافق) اسم اختياري للزر مثلا (مسح ، إعادة تعيين ، تفريغ)

عناصر جديدة في ال HTML5 <datalist> <input> types <input> attributes <output>

نهاية الدرس التاسع