الصفحة الرئيسية
دروس HTML

الدرس 3 دليل الجداول والنماذج في HTML

تعلم تنظيم البيانات بإستخدام الجداول وإنشاء نماذج تفاعلية لجمع المعلومات،بناء الهياكر المعقدة وإنشاء تجارب مستخدم متكاملة بإستخدام عناصر HTML الأساسية
مدونة العرائش التقنية

الدرس 3 الجداول والنماذج في HTML

الدرس 3 الجداول والنماذج في HTML

دليل الجداول في لغة HTML

تستخدم الجداول لعرض البيانات المنظمة في صفوف وأعمدة.

1. الجدول الأساسي

الكود:

<table border="1">
    <tr>
        <th>الاسم</th>
        <th>العمر</th>
        <th>المدينة</th>
    </tr>
    <tr>
        <td>أحمد</td>
        <td>25</td>
        <td>الرياض</td>
    </tr>
</table>

النتيجة:

الاسم العمر المدينة
أحمد 25 الرياض
فاطمة 30 جدة

2. عناصر الجدول

العنصر الوصف مثال
<table> يحدد بداية ونهاية الجدول الجدول بأكمله
<tr> صف في الجدول (Table Row) صف البيانات
<th> عنوان العمود (Table Header) الاسم
<td> خلية بيانات (Table Data) أحمد

3. دمج الخلايا

الكود:

<table border="1">
    <tr>
        <th colspan="2">المعلومات الشخصية</th>
    </tr>
    <tr>
        <td>الاسم</td>
        <td>أحمد</td>
    </tr>
    <tr>
        <td rowspan="2">الهوايات</td>
        <td>القراءة</td>
    </tr>
    <tr>
        <td>السباحة</td>
    </tr>
</table>

النتيجة:

المعلومات الشخصية
الاسم أحمد
الهوايات القراءة
السباحة

4. أجزاء الجدول المتقدمة

الكود:

<table border="1">
    <caption>جدول الطلاب</caption>
    <thead>
        <tr>
            <th>م</th>
            <th>الاسم</th>
            <th>الدرجة</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>أحمد</td>
            <td>95</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">المعدل</td>
            <td>90</td>
        </tr>
    </tfoot>
</table>

النتيجة:

جدول درجات الطلاب
م الاسم الدرجة
1 أحمد 95
2 فاطمة 88
3 محمد 92
المعدل 91.7

💡 نصائح للجداول:

  1. استخدم <th> لعناوين الأعمدة فقط
  2. استخدم colspan لدمج أعمدة
  3. استخدم rowspan لدمج صفوف
  4. استخدم <caption> لعنوان الجدول
  5. الجداول للبيانات فقط، وليس للتخطيط

دليل النماذج (Forms) في لغة HTML

النماذج تستخدم لجمع المعلومات من المستخدمين.

1. النموذج الأساسي

الكود:

<form action="process.php" method="POST">
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="username">
    
    <input type="submit" value="إرسال">
</form>

النتيجة:

2. عناصر النموذج الرئيسية

العنصر الوصف إلزامي
<form> حاوية جميع عناصر النموذج ✅ نعم
action الصفحة التي تستقبل البيانات ✅ نعم
method طريقة الإرسال (GET أو POST) ✅ نعم
<input> حقل إدخال البيانات ✅ نعم
<label> تسمية لحقل الإدخال ❌ لا (لكن مهم)

3. مقارنة GET و POST

النوع طريقة الإرسال الاستخدام مثال
GET يرسل البيانات عبر URL البحث، الروابط search.php?q=html
POST يرسل البيانات بشكل مخفي تسجيل الدخول، نماذج حساسة إرسال بيانات النموذج

دليل أنواع حقول الإدخال في HTML

1. حقول النصوص

النوع الكود المثال
نص عادي <input type="text">
بريد إلكتروني <input type="email">
كلمة مرور <input type="password">
رقم <input type="number">
تاريخ <input type="date">

2. الاختيارات

النوع الكود المثال
مربع اختيار 
<input type="checkbox">
زر اختيار 
<input type="radio">
قائمة منسدلة 
<select>
<option>...</option>
</select>

3. حقول أخرى

النوع الكود المثال
مربع نص كبير <textarea></textarea>
زر إرسال <input type="submit">
زر إعادة تعيين <input type="reset">
زر عادي <button></button>
اختيار ملف <input type="file">
خفي <input type="hidden">

4. السمات المهمة للحقول

السمة الوصف مثال
name اسم الحقل (مهم عند الإرسال) name="username"
placeholder نص تلميح داخل الحقل placeholder="اكتب اسمك"
required يجعل الحقل إلزامياً required
disabled يعطل الحقل (غير قابل للتعديل) disabled
readonly للقراءة فقط (قابل للتحديد) readonly
maxlength أقصى عدد للحروف maxlength="50"
min/max الحد الأدنى/الأقصى للأرقام min="0" max="100"

تمرين عملي لإنشاء نموذج تسجيل الطلاب بإستخدام HTML

المطلوب:

أنشئ نموذج تسجيل طالب جامعي يحتوي على:

  1. معلومات الطالب الشخصية (الاسم، البريد، تاريخ الميلاد)
  2. اختيار التخصص (قائمة منسدلة)
  3. المهارات (مربعات اختيار متعددة)
  4. مستوى الدراسة (أزرار اختيار)
  5. ملاحظات (مربع نص كبير)
  6. رفع صورة شخصية
  7. أزرار إرسال ومسح

قالب لتبدأ منه:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>نموذج تسجيل الطلاب</title>
</head>
<body>
    <h1>تسجيل طالب جديد</h1>
    
    <form action="register.php" method="POST">
        <h2>المعلومات الشخصية</h2>
        <label for="name">الاسم الكامل:</label>
        <input type="text" id="name" name="fullname" required>
        
        <!-- أكمل الباقي -->
        
        <input type="submit" value="تسجيل">
        <input type="reset" value="مسح النموذج">
    </form>
</body>
</html>
 

إختبار الدرس الثالث في لغة HTML

1. ما العنصر المستخدم لإنشاء صف في الجدول؟





2. كيف تدمج خليتين أفقياً (في نفس الصف)؟





3. أي نوع input يستخدم لإدخال كلمة المرور؟





4. ما الفرق بين GET و POST في النماذج؟





ملخص الدرس الثالث

  • تعلمنا إنشاء الجداول وعرض البيانات المنظمة
  • عرفنا كيفية دمج الخلايا باستخدام colspan و rowspan
  • أنشأنا نماذج لجمع البيانات من المستخدمين
  • استخدمنا جميع أنواع حقول الإدخال (نص، اختيار، ملفات)
  • تعرفنا على الفرق بين GET و POST
  • طبقنا المعرفة بإنشاء نموذج تسجيل طلاب كامل

جدول المهارات المكتسبة:

الدرس المهارات الأساسية المشاريع
1 هيكل HTML، نصوص، روابط صفحة شخصية
2 قوائم، صور، وسائط صفحة وصفة طعام
3 جداول، نماذج، إدخال بيانات نموذج تسجيل

↑ العودة للأعلى | الدرس السابق | الدرس التالي: HTML الدلالي وإمكانية الوصول

© 2026 دورة HTML للمبتدئين - الدرس 3

إرسال تعليق