الدرس 2: هيكلة صفحة HTML

🔗 فهرس دورة HTML:

• 1. مقدمة إلى HTML
• 2. هيكلة صفحة HTML
• 3. أهم وسوم HTML
• 4. إدراج الروابط والصور
• 5. القوائم والجداول
• 6. النماذج (Forms)
• 7. مقدمة إلى CSS

📘 النماذج (Forms) في HTML

🔹 1. ما هو النموذج؟

النموذج هو قسم داخل صفحة ويب يتيح للمستخدم إدخال بيانات، مثل التسجيل، إرسال رسالة، أو تعبئة استبيان.

🔹 2. الوسوم الأساسية للنموذج

• <form>: العنصر الرئيسي للنموذج.
• <input>: لإنشاء حقول إدخال متعددة (نص، كلمة مرور، زر...).
• <textarea>: حقل نص كبير متعدد الأسطر.
• <button> أو <input type="submit">: زر الإرسال.

🔹 3. مثال لنموذج تسجيل بسيط

<form action="/submit" method="post">
  <label for="name">الاسم:</label>
  <input type="text" id="name" name="name" placeholder="أدخل اسمك" required>
  
  <br><br>
  
  <label for="email">البريد الإلكتروني:</label>
  <input type="email" id="email" name="email" placeholder="example@mail.com" required>
  
  <br><br>
  
  <label for="message">الرسالة:</label><br>
  <textarea id="message" name="message" rows="4" cols="30" placeholder="اكتب رسالتك هنا"></textarea>
  
  <br><br>
  
  <button type="submit">إرسال</button>
</form>

---

🔹 4. شرح الخصائص المهمة

• action: الرابط الذي تُرسل إليه البيانات عند الضغط على زر الإرسال.
• method: طريقة الإرسال (GET أو POST).
• required: تجعل الحقل إلزاميًا.
• placeholder: نص يظهر داخل الحقل كإرشاد.

---

---

المقال السابق: القوائم والجداول

المقال التالي: مقدمة إلى CSS