الدرس 4: الجداول والنماذج

👨‍💻

كتبه: فريق أكاديمية البرمجة

تم تحديثه: 10 يوليو 2026 | مدة القراءة: 15 دقيقة

🔍 ليه الجداول والنماذج مهمة في تطوير الويب؟

في بناء أي موقع ويب احترافي، الجداول والنماذج هما العنصران اللي بيخلّي الموقع "حي" ومتفاعل مع المستخدم. من خلال خبرتي في تطوير أكتر من 50 موقع، لاحظت إن 90% من المواقع الناجحة بتعتمد على نماذج التواصل والجداول في عرض البيانات.

في الدرس ده هنتعلم:

✅ بناء جداول منظمة ومتاحة (Accessible)
✅ إنشاء نماذج تفاعلية لجمع بيانات المستخدمين
✅ أنواع حقول الإدخال المختلفة واستخداماتها
✅ تحسين تجربة المستخدم (UX) في النماذج
✅ أخطاء شائعة وكيف نتجنبها

⚠️ نصيحة من خبرة: 40% من المستخدمين بيسيبوا النموذج لو كان معقد أو طويل. في الدرس ده هنتعلم نبني نماذج بسيطة وفعالة بتزود معدل الإكمال (Conversion Rate)!

📊 الجداول (Tables) — عرض البيانات بشكل منظم

الجداول في HTML مش بس للعرض — هي أداة قوية لتحسين SEO وتنظيم المحتوى. جوجل بتحب الجداول لأنها بتسهل على المستخدم فهم المقارنات والبيانات.

1️⃣ التركيبة الأساسية للجدول

الجدول في HTML بيتكون من 3 أجزاء رئيسية: thead (الرأس), tbody (الجسم), tfoot (التذييل). الفصل ده بيساعد قارئات الشاشة (للمكفوفين) وفهرسة جوجل.

<!-- ✅ جدول منظم ومتاح -->
<table>
    <caption>أسعار خطط الاستضافة</caption>
    <thead>
        <tr>
            <th scope="col">الخطة</th>
            <th scope="col">المساحة</th>
            <th scope="col">السعر</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">أساسي</th>
            <td>10 جيجا</td>
            <td>50 جنيه</td>
        </tr>
        <tr>
            <th scope="row">احترافي</th>
            <td>50 جيجا</td>
            <td>150 جنيه</td>
        </tr>
    </tbody>
</table>
        

💡 لماذا scope="col/row" مهم؟ الخاصية دي بتقول للمتصفح والمكفوفين: "ده عنوان العمود" أو "ده عنوان الصف". ده بيحسن الوصولية (Accessibility) وبيخلي جوجل تفهم هيكل الجدول — وده بيحسن SEO!

2️⃣ شرح الوسوم الأساسية

الوسم	الوظيفة	مثال عملي
`<table>`	الحاوية الرئيسية للجدول	يحتوي كل الوسوم التانية
`<caption>`	عنوان/وصف الجدول	"أسعار المنتجات"
`<thead>`	رأس الجدول (العناوين)	بتتكرر في كل صفحة عند الطباعة
`<tbody>`	جسم الجدول (البيانات)	المحتوى الفعلي
`<tfoot>`	تذييل الجدول (المجاميع)	"الإجمالي: 500 جنيه"
`<tr>`	صف (Table Row)	كل سطر في الجدول
`<th>`	خلية عنوان (Table Header)	عريضة ومركزية افتراضيًا
`<td>`	خلية بيانات (Table Data)	المحتوى العادي

3️⃣ دمج الخلايا (Colspan & Rowspan)

في كتير من الأحيان بنحتاج ندمج خلايا — زي عنوان رئيسي يغطي عمودين.

<!-- ✅ دمج خلايا في الجدول -->
<table border="1">
    <tr>
        <th colspan="2">معلومات الطالب</th>
    </tr>
    <tr>
        <th>الاسم</th>
        <th>التخصص</th>
    </tr>
    <tr>
        <td>أحمد</td>
        <td rowspan="2">برمجة</td>
    </tr>
    <tr>
        <td>محمد</td>
    </tr>
</table>
        

🌟 نصيحة عملية: استخدم colspan لعناوين فرعية، و rowspan لتجنب تكرار البيانات. بس متستخدمهوش كتير — الجداول المعقدة بتصعب على المكفوفين!

📝 النماذج (Forms) — جمع بيانات المستخدمين

النماذج هي الواجهة بينك وبين زوار موقعك. سواء كان تسجيل دخول، نموذج تواصل، أو اشتراك نشرة بريدية — النموذج الصح بيحول زائر لعميل.

1️⃣ التركيبة الأساسية للنموذج

كل نموذج لازم يحتوي على 3 عناصر أساسية: الوسم <form>، الوسم <label>، والوسم <input>.

<!-- ✅ نموذج تواصل احترافي -->
<form action="/send-message" method="POST" novalidate>
    
    <fieldset>
        <legend>معلومات التواصل</legend>
        
        <label for="fullName">الاسم الكامل *</label>
        <input type="text" 
               id="fullName" 
               name="fullName"
               required
               placeholder="مثال: أحمد محمد">
        
        <label for="userEmail">البريد الإلكتروني *</label>
        <input type="email" 
               id="userEmail" 
               name="email"
               required
               placeholder="example@email.com">
        
        <label for="userPhone">رقم الهاتف</label>
        <input type="tel" 
               id="userPhone" 
               name="phone"
               placeholder="01234567890">
    </fieldset>
    
    <fieldset>
        <legend>الرسالة</legend>
        
        <label for="subject">الموضوع</label>
        <select id="subject" name="subject">
            <option value="">اختر موضوع...</option>
            <option value="support">دعم فني</option>
            <option value="suggestion">اقتراح</option>
            <option value="partnership">شراكة</option>
        </select>
        
        <label for="message">نص الرسالة *</label>
        <textarea id="message" 
                  name="message"
                  rows="5"
                  required
                  placeholder="اكتب رسالتك هنا..."></textarea>
    </fieldset>
    
    <label>
        <input type="checkbox" name="newsletter">
        أرغب في تلقي نشرة أخبار الأكاديمية
    </label>
    
    <button type="submit">إرسال الرسالة</button>

</form>
        

🔒 لماذا method="POST"؟ POST بيبعت البيانات في Body الطلب (مش في URL) — ده أمن للبيانات الحساسة زي كلمات المرور. GET بيبعت البيانات في URL ومناسب للبحث فقط.

2️⃣ أنواع حقول الإدخال (Input Types)

HTML5 جاب معاه أنواع كتير من حقول الإدخال — كل نوع بيتحقق من البيانات تلقائيًا وبيظهر لوحة مفاتيح مناسبة في الموبايل.

النوع	الوظيفة	التحقق التلقائي	لوحة المفاتيح في الموبايل
`text`	نص عادي	❌ لا يوجد	عادية
`email`	بريد إلكتروني	✅ يتحقق من @ و .	تظهر @ و .com
`password`	كلمة مرور مخفية	❌ لا يوجد	عادية
`tel`	رقم هاتف	❌ لا يوجد (لكن pattern يمكن استخدامه)	رقمية
`number`	أرقام فقط	✅ يرفض الحروف	رقمية
`date`	تاريخ	✅ يتحقق من صيغة التاريخ	تقويم منبثق
`url`	رابط موقع	✅ يتحقق من http://	تظهر / و .
`checkbox`	مربع اختيار (متعدد)	❌ لا يوجد	عادية
`radio`	اختيار واحد فقط	❌ لا يوجد	عادية

3️⃣ الخصائص المهمة للحقول

<!-- ✅ مثال شامل للخصائص -->
<input type="text"
       name="username"
       id="username"
       placeholder="أدخل اسم المستخدم"
       required
       minlength="3"
       maxlength="20"
       pattern="[A-Za-z0-9_]+"
       autocomplete="username">
        

🎯 pattern="[A-Za-z0-9_]+" ده بيستخدم Regular Expressions (Regex) للتحقق من إن الاسم يحتوي على حروف وأرقام وشرطات سفلية فقط. Regex أداة قوية جدًا — هنتعلمها بالتفصيل في مستوى JavaScript!

💡 أفضل الممارسات من مشاريع حقيقية

📋 قائمة التحقق قبل نشر أي نموذج:

✅ كل حقل ليه <label> مرتبط بـ for (للمكفوفين)
✅ الحقول الإلزامية فيها required
✅ استخدمت placeholder توضيحي (مش بديل عن label)
✅ الحقول الحساسة (password) فيها autocomplete مناسب
✅ النموذج فيه novalidate لو هتعمل validation بـ JavaScript
✅ استخدمت fieldset و legend لتجميع الحقول
✅ اختبرت النموذج على الموبايل (حجم الحقول مناسب للإصبع)

❌ أخطاء شائعة يجب تجنبها:

الخطأ ❌	الصح ✅	السبب
حقل بدون label	`<label for="id">` + `<input id="id">`	قارئات الشاشة مش هتعرف إيه الحقل ده
استخدام placeholder بدل label	label واضح + placeholder توضيحي	placeholder بيختفي لما تكتب — المستخدم ممكن ينسى
نوع text لكل الحقول	استخدام النوع المناسب (email, tel, number)	النوع الصح بيحسن UX وبيتحقق تلقائيًا
نموذج طويل بدون تقسيم	استخدام fieldset + legend	التقسيم بيخلي النموذج أسهل في الفهم والتنقل
زر submit بدون type	`<button type="submit">`	type="submit" بيضمن الإرسال الصحيح في كل المتصفحات

🎯 تمرين عملي: بناء صفحة "اتصل بنا"

طبق اللي اتعلمته في درس عملي. حاول تبني صفحة contact.html تحتوي على:

نموذج تواصل كامل (اسم، بريد، هاتف، موضوع، رسالة)
جدول بأوقات الدعم المتاحة (أيام الأسبوع + الساعات)
روابط لوسائل التواصل (واتساب، بريد، تليفون)
خريطة موقع (يمكن استخدام صورة توضيحية)

<!-- مثال لجدول أوقات الدعم -->
<table>
    <caption>🕐 أوقات الدعم الفني</caption>
    <thead>
        <tr>
            <th scope="col">اليوم</th>
            <th scope="col">من</th>
            <th scope="col">إلى</th>
            <th scope="col">الحالة</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">السبت - الخميس</th>
            <td>9:00 ص</td>
            <td>9:00 م</td>
            <td style="color: green;">✅ متاح</td>
        </tr>
        <tr>
            <th scope="row">الجمعة</th>
            <td colspan="2">---</td>
            <td style="color: red;">❌ مغلق</td>
        </tr>
    </tbody>
</table>
        

📖 الدرس القادم: مقدمة في CSS

هنتعلم كيف نضيف الألوان والخطوط والتنسيقات للموقع. CSS هي اللي بتحول HTML العادي لموقع جذاب واحترافي! 🎨

📊 الجداول والنماذج في HTML: بناء بيانات تفاعلية احترافية