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

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

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

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

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

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

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

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

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

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

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