HTML & CSS
النماذج والجداول في HTML — دليل شامل 2026
📅 2026-10-24⏱ 10 دقائق قراءة
في المقال السابق، تعلمت الصور والروابط. الآن سنتعلم **النماذج** و **الجداول** — وهما عنصران أساسيان في أي موقع تفاعلي.
في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم النماذج والجداول، مع تمارين وحلول.
## ما هو النموذج (Form)؟
**النموذج** هو **حاوية** لجمع بيانات المستخدم. يُستخدم في:
- تسجيل الدخول.
- التسجيل.
- البحث.
- الاتصال.
- الطلبات.
**الصيغة الأساسية:**
```html
<form action="/submit" method="POST">
<!-- حقول الإدخال -->
<input type="text" name="username">
<button type="submit">إرسال</button>
</form>
```
## سمات النموذج (form)
<table>
<thead>
<tr>
<th>السمة</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>action</code></td>
<td>عنوان URL الذي يُرسل إليه النموذج</td>
</tr>
<tr>
<td><code>method</code></td>
<td>طريقة الإرسال (GET أو POST)</td>
</tr>
<tr>
<td><code>target</code></td>
<td>أين يُعرض الرد</td>
</tr>
<tr>
<td><code>enctype</code></td>
<td>نوع الترميز (لرفع الملفات)</td>
</tr>
<tr>
<td><code>autocomplete</code></td>
<td>الإكمال التلقائي (on/off)</td>
</tr>
</tbody>
</table>
**الفرق بين GET و POST:**
<table>
<thead>
<tr>
<th>المعيار</th>
<th>GET</th>
<th>POST</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>البيانات</strong></td>
<td>في الرابط</td>
<td>في الجسم</td>
</tr>
<tr>
<td><strong>الأمان</strong></td>
<td>❌ غير آمن</td>
<td>✅ أكثر أماناً</td>
</tr>
<tr>
<td><strong>الحجم</strong></td>
<td>محدود</td>
<td>غير محدود</td>
</tr>
<tr>
<td><strong>الاستخدام</strong></td>
<td>البحث</td>
<td>البيانات الحساسة</td>
</tr>
</tbody>
</table>
## حقول الإدخال (input)
وسم `<input>` هو **الأكثر استخداماً** في النماذج. له **أنواع** كثيرة:
### 1. النص (text)
```html
<label for="name">الاسم:</label>
<input type="text" id="name" name="name" placeholder="أدخل اسمك" required>
```
### 2. البريد الإلكتروني (email)
```html
<label for="email">البريد:</label>
<input type="email" id="email" name="email" placeholder="example@email.com" required>
```
### 3. كلمة المرور (password)
```html
<label for="password">كلمة المرور:</label>
<input type="password" id="password" name="password" minlength="8" required>
```
### 4. الأرقام (number)
```html
<label for="age">العمر:</label>
<input type="number" id="age" name="age" min="18" max="100" step="1">
```
### 5. التاريخ (date)
```html
<label for="birthdate">تاريخ الميلاد:</label>
<input type="date" id="birthdate" name="birthdate">
```
### 6. الوقت (time)
```html
<label for="meeting">موعد الاجتماع:</label>
<input type="time" id="meeting" name="meeting">
```
### 7. اللون (color)
```html
<label for="color">اختر لوناً:</label>
<input type="color" id="color" name="color" value="#3b82f6">
```
### 8. المدى (range)
```html
<label for="volume">مستوى الصوت:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">
```
### 9. مربع الاختيار (checkbox)
```html
<label>
<input type="checkbox" name="agree" value="yes">
أوافق على الشروط
</label>
```
### 10. زر الراديو (radio)
```html
<p>الجنس:</p>
<label>
<input type="radio" name="gender" value="male">
ذكر
</label>
<label>
<input type="radio" name="gender" value="female">
أنثى
</label>
```
**⚠️ مهم:** أزرار الراديو التي تنتمي لنفس المجموعة **يجب أن تحمل نفس `name`**.
### 11. الملف (file)
```html
<label for="avatar">صورة شخصية:</label>
<input type="file" id="avatar" name="avatar" accept="image/*">
```
### 12. البحث (search)
```html
<input type="search" name="q" placeholder="ابحث...">
```
## جدول أنواع input
<table>
<thead>
<tr>
<th>النوع</th>
<th>الاستخدام</th>
<th>المثال</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>text</code></td>
<td>نص عادي</td>
<td>الاسم</td>
</tr>
<tr>
<td><code>email</code></td>
<td>بريد إلكتروني</td>
<td>user@mail.com</td>
</tr>
<tr>
<td><code>password</code></td>
<td>كلمة مرور</td>
<td>••••••</td>
</tr>
<tr>
<td><code>number</code></td>
<td>أرقام</td>
<td>25</td>
</tr>
<tr>
<td><code>date</code></td>
<td>تاريخ</td>
<td>2026-10-24</td>
</tr>
<tr>
<td><code>time</code></td>
<td>وقت</td>
<td>14:30</td>
</tr>
<tr>
<td><code>color</code></td>
<td>لون</td>
<td>#FF0000</td>
</tr>
<tr>
<td><code>range</code></td>
<td>مدى</td>
<td>50</td>
</tr>
<tr>
<td><code>checkbox</code></td>
<td>خيارات متعددة</td>
<td>☑️</td>
</tr>
<tr>
<td><code>radio</code></td>
<td>اختيار واحد</td>
<td>🔘</td>
</tr>
<tr>
<td><code>file</code></td>
<td>ملف</td>
<td>📎</td>
</tr>
<tr>
<td><code>submit</code></td>
<td>زر إرسال</td>
<td>إرسال</td>
</tr>
<tr>
<td><code>reset</code></td>
<td>زر إعادة</td>
<td>إعادة</td>
</tr>
</tbody>
</table>
## القوائم المنسدلة (select)
```html
<label for="country">الدولة:</label>
<select id="country" name="country">
<option value="">اختر دولة</option>
<option value="jo">الأردن</option>
<option value="eg">مصر</option>
<option value="sa">السعودية</option>
</select>
```
**قائمة متعددة:**
```html
<select name="skills" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="react">React</option>
</select>
```
**مجموعات (optgroup):**
```html
<select name="food">
<optgroup label="فواكه">
<option value="apple">تفاح</option>
<option value="banana">موز</option>
</optgroup>
<optgroup label="خضروات">
<option value="tomato">طماطم</option>
<option value="cucumber">خيار</option>
</optgroup>
</select>
```
## منطقة النص (textarea)
```html
<label for="message">رسالتك:</label>
<textarea id="message" name="message" rows="5" cols="40" placeholder="اكتب رسالتك..."></textarea>
```
**السمات:**
- **`rows`:** عدد الأسطر.
- **`cols`:** عدد الأعمدة.
- **`maxlength`:** الحد الأقصى للأحرف.
## الأزرار
### 1. زر الإرسال (submit)
```html
<button type="submit">إرسال</button>
```
### 2. زر عادي (button)
```html
<button type="button" onclick="alert('مرحباً')">اضغط</button>
```
### 3. زر الإعادة (reset)
```html
<button type="reset">مسح النموذج</button>
```
**الفرق بين `<input type="submit">` و `<button>`:**
```html
<!-- الأقدم: -->
<input type="submit" value="إرسال">
<!-- الأحدث (أفضل): -->
<button type="submit">إرسال</button>
```
**`<button>` أفضل** لأنه يمكن أن يحتوي على نص، صور، وأيقونات.
## التسميات (label)
**`<label>`** يربط النص بحقل الإدخال.
**طريقتان:**
```html
<!-- الطريقة 1: using for + id -->
<label for="username">الاسم:</label>
<input type="text" id="username">
<!-- الطريقة 2: التغليف -->
<label>
الاسم:
<input type="text">
</label>
```
**⚠️ مهم:** `<label>` يحسّن:
- **الوصول:** النقر على النص يفعّل الحقل.
- **إمكانية الوصول:** قارئ الشاشة يفهم الحقل.
## التحقق من الإدخال (Validation)
HTML5 يوفر **تحققاً مدمجاً**:
<table>
<thead>
<tr>
<th>السمة</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>required</code></td>
<td>حقل إلزامي</td>
</tr>
<tr>
<td><code>minlength</code></td>
<td>الحد الأدنى للأحرف</td>
</tr>
<tr>
<td><code>maxlength</code></td>
<td>الحد الأقصى للأحرف</td>
</tr>
<tr>
<td><code>min</code></td>
<td>الحد الأدنى (للأرقام)</td>
</tr>
<tr>
<td><code>max</code></td>
<td>الحد الأقصى (للأرقام)</td>
</tr>
<tr>
<td><code>pattern</code></td>
<td>نمط (Regex)</td>
</tr>
</tbody>
</table>
**مثال:**
```html
<input
type="text"
name="username"
required
minlength="3"
maxlength="20"
pattern="[a-zA-Z0-9]+"
placeholder="3-20 حرفاً"
>
```
## مجموعات الحقول (fieldset)
لتجميع حقول مرتبطة:
```html
<fieldset>
<legend>المعلومات الشخصية</legend>
<label for="fname">الاسم الأول:</label>
<input type="text" id="fname" name="fname">
<label for="lname">اسم العائلة:</label>
<input type="text" id="lname" name="lname">
</fieldset>
```
**النتيجة:** إطار حول المجموعة + عنوان.
## ما هو الجدول (Table)؟
**الجدول** هو عرض **بيانات منظمة** في صفوف وأعمدة.
**الصيغة:**
```html
<table>
<thead>
<tr>
<th>العمود 1</th>
<th>العمود 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>خلية 1</td>
<td>خلية 2</td>
</tr>
</tbody>
</table>
```
## وسوم الجدول
<table>
<thead>
<tr>
<th>الوسم</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><table></code></td>
<td>الجدول</td>
</tr>
<tr>
<td><code><thead></code></td>
<td>رأس الجدول</td>
</tr>
<tr>
<td><code><tbody></code></td>
<td>جسم الجدول</td>
</tr>
<tr>
<td><code><tfoot></code></td>
<td>تذييل الجدول</td>
</tr>
<tr>
<td><code><tr></code></td>
<td>صف (Table Row)</td>
</tr>
<tr>
<td><code><th></code></td>
<td>خلية رأس (Table Header)</td>
</tr>
<tr>
<td><code><td></code></td>
<td>خلية عادية (Table Data)</td>
</tr>
<tr>
<td><code><caption></code></td>
<td>عنوان الجدول</td>
</tr>
</tbody>
</table>
## مثال جدول كامل
```html
<table>
<caption>درجات الطلاب</caption>
<thead>
<tr>
<th>الاسم</th>
<th>الرياضيات</th>
<th>العلوم</th>
<th>العربي</th>
</tr>
</thead>
<tbody>
<tr>
<td>أحمد</td>
<td>95</td>
<td>88</td>
<td>92</td>
</tr>
<tr>
<td>محمد</td>
<td>85</td>
<td>90</td>
<td>88</td>
</tr>
<tr>
<td>علي</td>
<td>78</td>
<td>82</td>
<td>80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>المتوسط</td>
<td>86</td>
<td>86.6</td>
<td>86.6</td>
</tr>
</tfoot>
</table>
```
## دمج الخلايا
### 1. الدمج الأفقي (colspan)
```html
<table>
<tr>
<th colspan="2">الاسم الكامل</th>
</tr>
<tr>
<td>أحمد</td>
<td>محمد</td>
</tr>
</table>
```
### 2. الدمج العمودي (rowspan)
```html
<table>
<tr>
<th rowspan="2">الاسم</th>
<th>المادة 1</th>
</tr>
<tr>
<th>المادة 2</th>
</tr>
<tr>
<td>أحمد</td>
<td>95</td>
</tr>
</table>
```
## أمثلة عملية
### 1. نموذج تسجيل
```html
<form action="/register" method="POST">
<fieldset>
<legend>معلومات الحساب</legend>
<label for="username">الاسم:</label>
<input type="text" id="username" name="username" required>
<label for="email">البريد:</label>
<input type="email" id="email" name="email" required>
<label for="password">كلمة المرور:</label>
<input type="password" id="password" name="password" minlength="8" required>
</fieldset>
<fieldset>
<legend>معلومات إضافية</legend>
<label for="birthdate">تاريخ الميلاد:</label>
<input type="date" id="birthdate" name="birthdate">
<label for="country">الدولة:</label>
<select id="country" name="country">
<option value="">اختر</option>
<option value="jo">الأردن</option>
<option value="eg">مصر</option>
</select>
<label>
<input type="checkbox" name="agree" required>
أوافق على الشروط
</label>
</fieldset>
<button type="submit">تسجيل</button>
<button type="reset">مسح</button>
</form>
```
### 2. نموذج اتصال
```html
<form action="/contact" method="POST">
<label for="name">الاسم:</label>
<input type="text" id="name" name="name" required>
<label for="email">البريد:</label>
<input type="email" id="email" name="email" required>
<label for="subject">الموضوع:</label>
<select id="subject" name="subject">
<option value="inquiry">استفسار</option>
<option value="support">دعم فني</option>
<option value="feedback">ملاحظات</option>
</select>
<label for="message">الرسالة:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">إرسال</button>
</form>
```
### 3. جدول مقارنة
```html
<table>
<caption>مقارنة الخطط</caption>
<thead>
<tr>
<th>الميزة</th>
<th>مجاني</th>
<th>مدفوع</th>
</tr>
</thead>
<tbody>
<tr>
<td>المقالات</td>
<td>10</td>
<td>غير محدود</td>
</tr>
<tr>
<td>الدعم</td>
<td>❌</td>
<td>✅</td>
</tr>
<tr>
<td>التحميلات</td>
<td>5</td>
<td>غير محدود</td>
</tr>
</tbody>
</table>
```
## تمارين عملية
### تمرين 1: نموذج تسجيل دخول
أنشئ نموذجاً بحقول البريد وكلمة المرور.
**الحل:**
```html
<form>
<label for="email">البريد:</label>
<input type="email" id="email" name="email" required>
<label for="password">كلمة المرور:</label>
<input type="password" id="password" name="password" required>
<button type="submit">دخول</button>
</form>
```
### تمرين 2: نموذج تسجيل
أنشئ نموذجاً بحقول: الاسم، البريد، كلمة المرور، العمر، الجنس.
**الحل:**
```html
<form>
<label for="name">الاسم:</label>
<input type="text" id="name" name="name" required>
<label for="email">البريد:</label>
<input type="email" id="email" name="email" required>
<label for="password">كلمة المرور:</label>
<input type="password" id="password" name="password" minlength="8" required>
<label for="age">العمر:</label>
<input type="number" id="age" name="age" min="18" max="100">
<p>الجنس:</p>
<label><input type="radio" name="gender" value="male"> ذكر</label>
<label><input type="radio" name="gender" value="female"> أنثى</label>
<button type="submit">تسجيل</button>
</form>
```
### تمرين 3: نموذج بحث
أنشئ نموذج بحث بسيط.
**الحل:**
```html
<form action="/search" method="GET">
<input type="search" name="q" placeholder="ابحث...">
<button type="submit">بحث</button>
</form>
```
### تمرين 4: جدول درجات
أنشئ جدولاً لدرجات 3 طلاب في 3 مواد.
**الحل:**
```html
<table>
<thead>
<tr>
<th>الاسم</th>
<th>رياضيات</th>
<th>علوم</th>
<th>عربي</th>
</tr>
</thead>
<tbody>
<tr>
<td>أحمد</td>
<td>95</td>
<td>88</td>
<td>92</td>
</tr>
<tr>
<td>محمد</td>
<td>85</td>
<td>90</td>
<td>88</td>
</tr>
<tr>
<td>علي</td>
<td>78</td>
<td>82</td>
<td>80</td>
</tr>
</tbody>
</table>
```
### تمرين 5: جدول منتجات
أنشئ جدولاً للمنتجات مع السعر والكمية.
**الحل:**
```html
<table>
<thead>
<tr>
<th>المنتج</th>
<th>السعر</th>
<th>الكمية</th>
</tr>
</thead>
<tbody>
<tr>
<td>لابتوب</td>
<td>5000 $</td>
<td>10</td>
</tr>
<tr>
<td>هاتف</td>
<td>2000 $</td>
<td>25</td>
</tr>
</tbody>
</table>
```
### تمرين 6: نموذج مع checkbox
أنشئ نموذجاً لاختيار المهارات.
**الحل:**
```html
<form>
<p>مهاراتك:</p>
<label><input type="checkbox" name="skills" value="html"> HTML</label>
<label><input type="checkbox" name="skills" value="css"> CSS</label>
<label><input type="checkbox" name="skills" value="js"> JavaScript</label>
<label><input type="checkbox" name="skills" value="react"> React</label>
<button type="submit">إرسال</button>
</form>
```
### تمرين 7: نموذج رفع ملف
أنشئ نموذجاً لرفع صورة.
**الحل:**
```html
<form enctype="multipart/form-data" method="POST">
<label for="avatar">صورة شخصية:</label>
<input type="file" id="avatar" name="avatar" accept="image/*">
<button type="submit">رفع</button>
</form>
```
### تمرين 8: نموذج اتصال كامل
أنشئ نموذج اتصال مع كل ما تعلمته.
**الحل:**
```html
<form action="/contact" method="POST">
<fieldset>
<legend>معلوماتك</legend>
<label for="name">الاسم:</label>
<input type="text" id="name" name="name" required>
<label for="email">البريد:</label>
<input type="email" id="email" name="email" required>
<label for="phone">الهاتف:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
<fieldset>
<legend>رسالتك</legend>
<label for="subject">الموضوع:</label>
<select id="subject" name="subject">
<option>استفسار</option>
<option>دعم فني</option>
<option>ملاحظات</option>
</select>
<label for="message">الرسالة:</label>
<textarea id="message" name="message" rows="5" required></textarea>
</fieldset>
<label>
<input type="checkbox" required>
أوافق على معالجة بياناتي
</label>
<button type="submit">إرسال</button>
</form>
```
## حل المشاكل الشائعة
### 🔴 المشكلة 1: النموذج لا يرسل
**الأسباب:**
- `name` مفقود في الحقل.
- `action` غير محدد.
- زر الإرسال بدون `type="submit"`.
**الحل:** تحقق من أن كل حقل له `name`، وأن هناك `<button type="submit">`.
### 🔴 المشكلة 2: زر الراديو لا يعمل
**السبب:** أزرار الراديو لها `name` مختلفة.
**الحل:**
```html
<!-- ❌ خطأ: -->
<input type="radio" name="g1" value="male">
<input type="radio" name="g2" value="female">
<!-- ✅ صحيح: -->
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
```
### 🔴 المشكلة 3: الجدول غير منظم
**السبب:** عدم استخدام `thead` و `tbody`.
**الحل:** نظّم الجدول بـ `thead`, `tbody`, `tfoot`.
### 🔴 المشكلة 4: `label` لا يعمل
**السبب:** `for` لا يطابق `id`.
**الحل:**
```html
<label for="username">الاسم:</label>
<input type="text" id="username">
```
**⚠️ لاحظ:** `for="username"` = `id="username"`.
### 🔴 المشكلة 5: الجدول يستخدم للتخطيط
**السبب:** استخدام `<table>` لتخطيط الصفحة.
**الحل:** استخدم `<div>` و CSS Grid/Flexbox بدلاً من ذلك.
## جدول الوسوم
<table>
<thead>
<tr>
<th>الوسم</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><form></code></td>
<td>نموذج</td>
</tr>
<tr>
<td><code><input></code></td>
<td>حقل إدخال</td>
</tr>
<tr>
<td><code><label></code></td>
<td>تسمية</td>
</tr>
<tr>
<td><code><select></code></td>
<td>قائمة منسدلة</td>
</tr>
<tr>
<td><code><option></code></td>
<td>خيار</td>
</tr>
<tr>
<td><code><textarea></code></td>
<td>منطقة نص</td>
</tr>
<tr>
<td><code><button></code></td>
<td>زر</td>
</tr>
<tr>
<td><code><fieldset></code></td>
<td>مجموعة</td>
</tr>
<tr>
<td><code><legend></code></td>
<td>عنوان المجموعة</td>
</tr>
<tr>
<td><code><table></code></td>
<td>جدول</td>
</tr>
<tr>
<td><code><tr></code></td>
<td>صف</td>
</tr>
<tr>
<td><code><th></code></td>
<td>خلية رأس</td>
</tr>
<tr>
<td><code><td></code></td>
<td>خلية</td>
</tr>
</tbody>
</table>
## قائمة تحقق نهائية
<table>
<thead>
<tr>
<th>المهمة</th>
<th>الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<td>بناء نموذج تسجيل دخول</td>
<td>⬜</td>
</tr>
<tr>
<td>استخدام أنواع input المختلفة</td>
<td>⬜</td>
</tr>
<tr>
<td>استخدام select و textarea</td>
<td>⬜</td>
</tr>
<tr>
<td>إضافة التحقق (validation)</td>
<td>⬜</td>
</tr>
<tr>
<td>بناء جدول بيانات</td>
<td>⬜</td>
</tr>
<tr>
<td>دمج الخلايا (colspan, rowspan)</td>
<td>⬜</td>
</tr>
<tr>
<td>حل التمارين الثمانية</td>
<td>⬜</td>
</tr>
</tbody>
</table>
## ماذا بعد هذا المقال؟
الآن بعد أن أتقنت النماذج والجداول، أنت جاهز للمقال التالي:
1. **الوسوم الدلالية** — HTML احترافي.
2. **CSS** — التصميم والأنماط.
3. **مشروع متكامل** — موقع كامل.
## الخلاصة
في هذا المقال، تعلمت:
- ✅ إنشاء النماذج (forms).
- ✅ جميع أنواع `input`.
- ✅ القوائم المنسدلة (select).
- ✅ مناطق النص (textarea).
- ✅ التحقق من الإدخال.
- ✅ الجداول (tables).
- ✅ دمج الخلايا (colspan, rowspan).
- ✅ حل 8 تمارين عملية.
**تذكر:** النماذج والجداول هما أدوات أساسية لأي موقع تفاعلي.