الجداول و النماذج
تخيل أنك تتصفح موقعاً لعرض نتائج مباريات كرة القدم، أو تريد التسجيل في منصة تعليمية جديدة. كيف يتم ترتيب تلك النتائج بشكل أنيق؟ وكيف ترسل بياناتك للمنصة؟ هنا يأتي دور درس اليوم:
1. الجداول (HTML Tables) الجداول ليست مجرد صفوف وأعمدة، بل هي أداة لعرض البيانات المعقدة بطريقة يسهل على العين قراءتها وفهمها. في هذا الجزء سنتعلم كيف نحول البيانات المشتتة إلى هيكل منظم يحتوي على: العناوين (Table Headers): لتعريف محتوى كل عمود. الصفوف والخلايا (Rows & Cells): لتوزيع المعلومات بدقة. 2. النماذج (HTML Forms) إذا كان الجدول هو وسيلة الموقع "ليتحدث" إليك، فالنموذج هو وسيلتك "لتتحدث" أنت إلى الموقع. النماذج هي أداة التفاعل الأولى، وبدونها لن نتمكن من تسجيل الدخول، البحث في جوجل، أو حتى شراء منتج من متجر إلكتروني. سنكتشف معاً: حقول الإدخال (Inputs): بمختلف أنواعها (نصوص، كلمات سر، بريد إلكتروني). أزرار الإرسال (Submit Buttons): التي تنقل البيانات من المتصفح إلى الخادم (Server).
١. الجداول في 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)
النموذج هو البوابة التي تربط بين الزائر وصاحب الموقع. بدون نموذج، الموقع مجرد صفحات ثابتة. لكن مع النموذج يمكنك استقبال طلبات، تسجيل مستخدمين، حجوزات، استطلاعات رأي، وحتى بيع منتجات!
نموذج تواصل كامل وجميل (يرسل الرسائل فعليًا باستخدام خدمة جاهزة مثل Formspree، بدون ما تكتب Backend بنفسك.!)
<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"> → الزر اللي يرسل النموذج
يجب أن نعلم أننا يجب في معظم الحالات أن ننشئ قاعدة بيانات وتكون هذه القاعدة متصلة بالنموذج ، بحيث اذا ضغطنا زر ارسال الان تنتقل هذه البيانات الى قاعدة البيانات ويتم تخزينها هناك.
إذا كان هدفك حفظ الرسائل داخل موقعك (لوحة تحكم/CRM) نعم تحتاج Backend + قاعدة بيانات. أما إذا هدفك وصول الرسالة لبريدك فقط، تقدر تستخدم خدمات مثل Formspree.
وهذا ماسوف نتعلمه في دورة php وهي اللغة الاكثر استخداما في حالة هناك بيانات يجب ربطها بالموقع الالكتروني وقاعدة البيانات معا.
كيف تجعل هذا النموذج يعمل فعليًا في أقل من 5 دقائق؟
- اذهب إلى formspree.io وسجل مجانًا ببريدك
- بعد التسجيل، اضغط "New Form" واكتب اسم النموذج
- سيعطيك رابط طويل مثل: https://formspree.io/f/xabc1234
- انسخ الرابط كاملاً والصقه مكان action في الكود
- ارفع الصفحة على النت → جرب النموذج → الرسالة ستصلك فورًا!
تمرين اليوم : صفحة "نتائج الطلاب + تواصل مع المدرسة"
تمرين اليوم: صفحة كاملة (جدول + نموذج)
<!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>مهمتك الان:
- انسخ الكود كاملاً في ملف جديد باسم results.html
- اعرض الصفحة
- غير بالجداول والنماذج زي ماتحب
- ثم اعرض الصفحة
خلاصة الدرس الخامس (لا تنساها أبدًا):
🧾 الجدول = table + thead + tbody + tr + th + td
📧 النموذج = form + input + textarea + select + button
🚀 لإرسال النموذج = استخدم Formspree أو Netlify Forms
بهذا الدرس أصبحت تمتلك مهارة حقيقية مطلوبة في سوق العمل. أي شركة أو مدرسة أو متجر إلكتروني صغير يحتاج شخص يعرف يصمم جدول درجات أو نموذج تواصل احترافي... وأنت الآن هذا الشخص!
الدرس القادم: إضافة الصوت والفيديو + الـ iframe
سنتعلم كيف نضيف فيديوهات يوتيوب، تسجيلات صوتية، وخرائط جوجل داخل صفحاتنا بسهولة!
لا تنسَ تحفظ هذه الصفحة وتطبق التمرين اليوم!