الجداول و النماذج

غير محدد مجاني

درس ٥: الجداول والنماذج (Tables & Forms)

اليوم نبني جدول درجات + نموذج تواصل حقيقي يعمل 100%!

الجداول = لعرض البيانات بشكل منظم
النماذج = لاستقبال بيانات الزائر (تسجيل، تواصل، طلبات…)

مرحبًا بك في الدرس الخامس من سلسلة تعلم HTML من الصفر إلى الاحتراف! اليوم سنغوص في اثنين من أهم العناصر التي لا غنى عنها في أي موقع احترافي: الجداول والنماذج. تخيل معي: مدرسة تريد عرض درجات الطلاب بشكل واضح، أو شركة تريد استقبال طلبات العملاء، أو حتى متجر إلكتروني يحتاج نموذج طلب شراء... كل هذا يتم باستخدام ما سنتعلمه اليوم.

بعد هذا الدرس ستكون قادرًا على بناء صفحات كاملة تحتوي على جداول بيانات احترافية + نماذج تواصل ترسل الرسائل فعليًا إلى بريدك الإلكتروني بدون أي برمجة خلفية!

١. الجداول في HTML – كل ما تحتاج تعرفه

الجدول في HTML هو أداة قوية جدًا لتنظيم البيانات. سواء كنت تعرض درجات الطلاب، أسعار المنتجات، مواعيد الحصص، أو حتى جدول مباريات... الجدول هو الحل الأمثل. في الماضي كان المطورون يستخدمون الجداول لتصميم الصفحات كاملة (خطأ كبير)، لكن اليوم نستخدمها فقط لعرض البيانات الجدولية.

جدول بسيط جدًا (للمبتدئين)

هذا هو الشكل الأساسي لأي جدول. نستخدم الوسم <table> وداخله <tr> للصفوف و <td> للخلايا. السمة border="1" تضيف حدود بسيطة حتى نرى الجدول بوضوح.

هذا أبسط شكل للجدول بدون أي class أو style:

<table border="1">
  <tr>
    <td>الاسم</td>
    <td>العمر</td>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>17</td>
  </tr>
</table>

جدول درجات الطلاب (احترافي 100%)

نفس البنية الاحترافية لكن بدون أي class (الجمال يجي لاحقًا مع CSS):

<table border="1">
  <thead>
    <tr>
      <th>الاسم</th>
      <th>الرياضيات</th>
      <th>العلوم</th>
      <th>المعدل</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>محمد</td>
      <td>95</td>
      <td>88</td>
      <td>91.5</td>
    </tr>
    <tr>
      <td>سارة</td>
      <td>98</td>
      <td>99</td>
      <td>98.5</td>
    </tr>
  </tbody>
</table>

نصيحة مهمة: دائمًا استخدم <thead> و <tbody> في الجداول الاحترافية. هذا يساعد محركات البحث (مثل جوجل) على فهم محتوى الجدول، كما يساعد برامج قراءة الشاشة للمكفوفين.

٢. النماذج (Forms) – أهم شيء في المواقع التفاعلية!

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

نموذج تواصل كامل وجميل (يرسل الرسائل فعليًا!)

نموذج تواصل كامل (يرسل الرسائل فعليًا – بدون أي class) 

<form action="https://formspree.io/f/أي_كود_هنا" method="POST">
  <div>
    <label>الاسم الكامل:</label><br>
    <input type="text" name="name" required><br><br>
  </div>
  <div>
    <label>البريد الإلكتروني:</label><br>
    <input type="email" name="email" required><br><br>
  </div>
  <div>
    <label>اختر الخدمة:</label><br>
    <select name="service">
      <option>تصميم موقع</option>
      <option>برمجة تطبيق</option>
      <option>استشارة</option>
    </select><br><br>
  </div>
  <div>
    <label>رسالتك:</label><br>
    <textarea name="message" rows="5" required></textarea><br><br>
  </div>
  <button type="submit">إرسال الآن</button>
</form>

شرح كامل لكل وسوم النماذج (لا تفوتك):

  • <form> → الوعاء الرئيسي لكل شيء في النموذج
  • action="" → الرابط اللي يرسل له البيانات (مثل Formspree)
  • method="POST" → أكثر أمانًا وإخفاءً للبيانات
  • <label> → نص توضيحي لكل حقل (مهم جدًا للمكفوفين ومحركات البحث)
  • <input type="text"> → حقل للنصوص العادية
  • <input type="email"> → يقبل إيميل فقط ويتأكد من الصيغة الصحيحة
  • <input type="password"> → لكلمات المرور (يظهر نجوم ★★★)
  • required → الحقل إجباري، ما يقدر يرسل بدون ما يعبيه
  • placeholder="" → نص تلميح داخل الحقل (يختفي لما تكتب)
  • <select> + <option> → قائمة منسدلة للاختيار
  • <textarea> → لحقل كتابة طويل (مثل الرسائل والتعليقات)
  • <button type="submit"> → الزر اللي يرسل النموذج

يجب أن نعلم أننا يجب أن ننشئ قاعدة بيانات وتكون هذه القاعدة متصلة بالنموذج ، بحيث اذا ضغطنا زر ارسال الان تنتقل هذه البيانات الى قاعدة البيانات ويتم تخزينها هناك.

وهذا ماسوف نتعلمه في دورة php وهي اللغة الاكثر استخداما في حالة هناك بيانات يجب ربطها بالموقع الالكتروني وقاعدة البيانات معا.

كيف تجعل هذا النموذج يعمل فعليًا في أقل من 5 دقائق؟

  1. اذهب إلى formspree.io وسجل مجانًا ببريدك
  2. بعد التسجيل، اضغط "New Form" واكتب اسم النموذج
  3. سيعطيك رابط طويل مثل: https://formspree.io/f/xabc1234
  4. انسخ الرابط كاملاً والصقه مكان action في الكود
  5. ارفع الصفحة على النت → جرب النموذج → الرسالة ستصلك فورًا!

تمرين اليوم الكبير: صفحة "نتائج الطلاب + تواصل مع المدرسة"

تمرين اليوم: صفحة كاملة (جدول + نموذج) 

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>نتائج الطلاب</title>
</head>
<body>
  <h1 style="background:#7c3aed;color:white;padding:20px;text-align:center;">
    نتائج الفصل الدراسي الأول
  </h1>

  <table border="1" width="90%" style="margin:30px auto;text-align:center;">
    <thead>
      <tr style="background:#7c3aed;color:white;">
        <th>الاسم</th><th>الرياضيات</th><th>العلوم</th><th>المعدل</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>أحمد</td><td>90</td><td>85</td><td>87.5</td></tr>
      <tr><td>سارة</td><td>98</td><td>99</td><td>98.5</td></tr>
      <tr><td>خالد</td><td>88</td><td>92</td><td>90</td></tr>
    </tbody>
  </table>

  <h2 style="text-align:center;color:#5b21b6;">تواصل مع المدرسة</h2>
  <form action="https://formspree.io/f/ضع_كودك_هنا" method="POST" style="width:80%;margin:0 auto;">
    <label>اسمك:</label><br>
    <input type="text" name="name" required style="width:100%;padding:12px;margin:8px 0;"><br>
    <label>إيميلك:</label><br>
    <input type="email" name="email" required style="width:100%;padding:12px;margin:8px 0;"><br>
    <label>رسالتك:</label><br>
    <textarea name="message" rows="6" required style="width:100%;padding:12px;margin:8px 0;"></textarea><br>
    <button type="submit" style="background:#7c3aed;color:white;padding:15px 50px;border:none;border-radius:50px;font-size:18px;">
      إرسال الرسالة
    </button>
  </form>
</body>
</html>

مهمتك الان:

  1. انسخ الكود كاملاً في ملف جديد باسم results.html
  2. اعرض الصفحة
  3. غير بالجداول والتماذج زي ماتحب
  4. ثم اعرض الصفحة

خلاصة الدرس الخامس (لا تنساها أبدًا):

🧾 الجدول = table + thead + tbody + tr + th + td

📧 النموذج = form + input + textarea + select + button

🚀 لإرسال النموذج = استخدم Formspree أو Netlify Forms

بهذا الدرس أصبحت تمتلك مهارة حقيقية مطلوبة في سوق العمل. أي شركة أو مدرسة أو متجر إلكتروني صغير يحتاج شخص يعرف يصمم جدول درجات أو نموذج تواصل احترافي... وأنت الآن هذا الشخص!

الدرس القادم: إضافة الصوت والفيديو + الـ iframe

سنتعلم كيف نضيف فيديوهات يوتيوب، تسجيلات صوتية، وخرائط جوجل داخل صفحاتنا بسهولة!

لا تنسَ تحفظ هذه الصفحة وتطبق التمرين اليوم!

الدرس التالي ← → رجوع