📘 اليوم الخامس · نماذج HTML

🎯 HTML Forms
👩‍🏫 من إعداد: فريق عمل جامعة بنها 🧑‍🏫 درس تفاعلي
🎯 أهداف الدرس
📝 أولاً: ما هي الـ Form؟

الـ Form هي وسيلة لإدخال البيانات.

أمثلة من الواقع:

<form> ... كل عناصر النموذج توضع هنا ... </form>
✏️ ثانياً: Text Input

لإدخال الاسم مثلاً.

<input type="text">
💡 Placeholder: يُستخدم لإظهار نص إرشادي داخل مربع الإدخال.
<input type="text" placeholder="أدخل اسمك">
🏷️ ثالثاً: Label

نستخدمه لكتابة اسم الحقل.

<label>الاسم:</label> <input type="text">
🔒 رابعاً: Password
<input type="password">

الحروف تظهر على شكل نقاط.

📧 خامساً: Email
<input type="email">

مخصص للبريد الإلكتروني.

🔢 سادساً: Number
<input type="number">
📅 سابعاً: Date
<input type="date">
🔘 ثامناً: Radio Button

لاختيار إجابة واحدة.

<input type="radio" name="gender"> ذكر <input type="radio" name="gender"> أنثى
💡 وجود نفس قيمة name يجعل المستخدم يختار خياراً واحداً فقط.
ذكر أنثى
✅ تاسعاً: Checkbox

يمكن اختيار أكثر من إجابة.

<input type="checkbox"> كرة القدم <input type="checkbox"> السباحة <input type="checkbox"> القراءة
كرة القدم السباحة القراءة
📝 عاشراً: Textarea

للكتابة الطويلة.

<textarea></textarea>

📋 الحادي عشر: Select (قائمة منسدلة)
<select> <option>مصر</option> <option>السعودية</option> <option>الإمارات</option> </select>
🔘 الثاني عشر: Button
<button>اضغط هنا</button> <input type="submit">
أو
💡 <input type="submit"> هو زر إرسال خاص بالنماذج.
📋 نموذج كامل
<!DOCTYPE html> <html> <head> <title>Student Registration</title> </head> <body> <h1>تسجيل طالب</h1> <form> <label>الاسم</label><br> <input type="text" placeholder="أدخل اسمك"><br><br> <label>البريد الإلكتروني</label><br> <input type="email"><br><br> <label>كلمة المرور</label><br> <input type="password"><br><br> <label>العمر</label><br> <input type="number"><br><br> <label>تاريخ الميلاد</label><br> <input type="date"><br><br> <label>النوع</label><br> <input type="radio" name="gender"> ذكر <input type="radio" name="gender"> أنثى <br><br> <label>الهوايات</label><br> <input type="checkbox"> كرة القدم <input type="checkbox"> السباحة <input type="checkbox"> القراءة <br><br> <label>الدولة</label><br> <select> <option>مصر</option> <option>السعودية</option> <option>الأردن</option> </select> <br><br> <label>نبذة عنك</label><br> <textarea rows="4" cols="40"></textarea> <br><br> <input type="submit"> </form> </body> </html>

تسجيل طالب

















ذكر أنثى


كرة القدم السباحة القراءة







📝 المشروع العملي: Student Registration Form

📝 المطلوب:

🧪 اختبار تفاعلي · مراجعة سريعة
🌟 درجتك
0 / 0