NahdaAI نهضة
HTML & CSS📅 2026-10-24⏱ 10 دقائق قراءة🎨 مقال 5 من 10

النماذج والجداول في HTML — دليل شامل 2026

دليل عملي مفصل للنماذج والجداول في HTML — حقول الإدخال، الأزرار، الجداول، مع تمارين وحلول

مشاركةLinkedInWhatsApp

في المقال السابق، تعلمت الصور والروابط. الآن سنتعلم النماذج و الجداول — وهما عنصران أساسيان في أي موقع تفاعلي.

في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم النماذج والجداول، مع تمارين وحلول.

ما هو النموذج (Form)؟

النموذج هو حاوية لجمع بيانات المستخدم. يُستخدم في:

  • تسجيل الدخول.
  • التسجيل.
  • البحث.
  • الاتصال.
  • الطلبات.

الصيغة الأساسية:

<form action="/submit" method="POST">
  <!-- حقول الإدخال -->
  <input type="text" name="username">
  <button type="submit">إرسال</button>
</form>

سمات النموذج (form)

السمةالوظيفة
actionعنوان URL الذي يُرسل إليه النموذج
methodطريقة الإرسال (GET أو POST)
targetأين يُعرض الرد
enctypeنوع الترميز (لرفع الملفات)
autocompleteالإكمال التلقائي (on/off)

الفرق بين GET و POST:

المعيارGETPOST
البياناتفي الرابطفي الجسم
الأمان❌ غير آمن✅ أكثر أماناً
الحجممحدودغير محدود
الاستخدامالبحثالبيانات الحساسة

حقول الإدخال (input)

وسم <input> هو الأكثر استخداماً في النماذج. له أنواع كثيرة:

1. النص (text)

<label for="name">الاسم:</label>
<input type="text" id="name" name="name" placeholder="أدخل اسمك" required>

2. البريد الإلكتروني (email)

<label for="email">البريد:</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required>

3. كلمة المرور (password)

<label for="password">كلمة المرور:</label>
<input type="password" id="password" name="password" minlength="8" required>

4. الأرقام (number)

<label for="age">العمر:</label>
<input type="number" id="age" name="age" min="18" max="100" step="1">

5. التاريخ (date)

<label for="birthdate">تاريخ الميلاد:</label>
<input type="date" id="birthdate" name="birthdate">

6. الوقت (time)

<label for="meeting">موعد الاجتماع:</label>
<input type="time" id="meeting" name="meeting">

7. اللون (color)

<label for="color">اختر لوناً:</label>
<input type="color" id="color" name="color" value="#3b82f6">

8. المدى (range)

<label for="volume">مستوى الصوت:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">

9. مربع الاختيار (checkbox)

<label>
  <input type="checkbox" name="agree" value="yes">
  أوافق على الشروط
</label>

10. زر الراديو (radio)

<p>الجنس:</p>
<label>
  <input type="radio" name="gender" value="male">
  ذكر
</label>
<label>
  <input type="radio" name="gender" value="female">
  أنثى
</label>

⚠️ مهم: أزرار الراديو التي تنتمي لنفس المجموعة يجب أن تحمل نفس name.

11. الملف (file)

<label for="avatar">صورة شخصية:</label>
<input type="file" id="avatar" name="avatar" accept="image/*">

12. البحث (search)

<input type="search" name="q" placeholder="ابحث...">

جدول أنواع input

النوعالاستخدامالمثال
textنص عاديالاسم
emailبريد إلكتروني[email protected]
passwordكلمة مرور••••••
numberأرقام25
dateتاريخ2026-10-24
timeوقت14:30
colorلون#FF0000
rangeمدى50
checkboxخيارات متعددة☑️
radioاختيار واحد🔘
fileملف📎
submitزر إرسالإرسال
resetزر إعادةإعادة

القوائم المنسدلة (select)

<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>

قائمة متعددة:

<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):

<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)

<label for="message">رسالتك:</label>
<textarea id="message" name="message" rows="5" cols="40" placeholder="اكتب رسالتك..."></textarea>

السمات:

  • rows: عدد الأسطر.
  • cols: عدد الأعمدة.
  • maxlength: الحد الأقصى للأحرف.

الأزرار

1. زر الإرسال (submit)

<button type="submit">إرسال</button>

2. زر عادي (button)

<button type="button" onclick="alert('مرحباً')">اضغط</button>

3. زر الإعادة (reset)

<button type="reset">مسح النموذج</button>

الفرق بين <input type="submit"> و <button>:

<!-- الأقدم: -->
<input type="submit" value="إرسال">

<!-- الأحدث (أفضل): -->
<button type="submit">إرسال</button>

<button> أفضل لأنه يمكن أن يحتوي على نص، صور، وأيقونات.

التسميات (label)

<label> يربط النص بحقل الإدخال.

طريقتان:

<!-- الطريقة 1: using for + id -->
<label for="username">الاسم:</label>
<input type="text" id="username">

<!-- الطريقة 2: التغليف -->
<label>
  الاسم:
  <input type="text">
</label>

⚠️ مهم: <label> يحسّن:

  • الوصول: النقر على النص يفعّل الحقل.
  • إمكانية الوصول: قارئ الشاشة يفهم الحقل.

التحقق من الإدخال (Validation)

HTML5 يوفر تحققاً مدمجاً:

السمةالوظيفة
requiredحقل إلزامي
minlengthالحد الأدنى للأحرف
maxlengthالحد الأقصى للأحرف
minالحد الأدنى (للأرقام)
maxالحد الأقصى (للأرقام)
patternنمط (Regex)

مثال:

<input 
  type="text" 
  name="username" 
  required 
  minlength="3" 
  maxlength="20"
  pattern="[a-zA-Z0-9]+"
  placeholder="3-20 حرفاً"
>

مجموعات الحقول (fieldset)

لتجميع حقول مرتبطة:

<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)؟

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

الصيغة:

<table>
  <thead>
    <tr>
      <th>العمود 1</th>
      <th>العمود 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>خلية 1</td>
      <td>خلية 2</td>
    </tr>
  </tbody>
</table>

وسوم الجدول

الوسمالوظيفة
<table>الجدول
<thead>رأس الجدول
<tbody>جسم الجدول
<tfoot>تذييل الجدول
<tr>صف (Table Row)
<th>خلية رأس (Table Header)
<td>خلية عادية (Table Data)
<caption>عنوان الجدول

مثال جدول كامل

<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)

<table>
  <tr>
    <th colspan="2">الاسم الكامل</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>محمد</td>
  </tr>
</table>

2. الدمج العمودي (rowspan)

<table>
  <tr>
    <th rowspan="2">الاسم</th>
    <th>المادة 1</th>
  </tr>
  <tr>
    <th>المادة 2</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>95</td>
  </tr>
</table>

أمثلة عملية

1. نموذج تسجيل

<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. نموذج اتصال

<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. جدول مقارنة

<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: نموذج تسجيل دخول

أنشئ نموذجاً بحقول البريد وكلمة المرور.

الحل:

<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: نموذج تسجيل

أنشئ نموذجاً بحقول: الاسم، البريد، كلمة المرور، العمر، الجنس.

الحل:

<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: نموذج بحث

أنشئ نموذج بحث بسيط.

الحل:

<form action="/search" method="GET">
  <input type="search" name="q" placeholder="ابحث...">
  <button type="submit">بحث</button>
</form>

تمرين 4: جدول درجات

أنشئ جدولاً لدرجات 3 طلاب في 3 مواد.

الحل:

<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: جدول منتجات

أنشئ جدولاً للمنتجات مع السعر والكمية.

الحل:

<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

أنشئ نموذجاً لاختيار المهارات.

الحل:

<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: نموذج رفع ملف

أنشئ نموذجاً لرفع صورة.

الحل:

<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: نموذج اتصال كامل

أنشئ نموذج اتصال مع كل ما تعلمته.

الحل:

<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 مختلفة.

الحل:

<!-- ❌ خطأ: -->
<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.

الحل:

<label for="username">الاسم:</label>
<input type="text" id="username">

⚠️ لاحظ: for="username" = id="username".

🔴 المشكلة 5: الجدول يستخدم للتخطيط

السبب: استخدام <table> لتخطيط الصفحة.

الحل: استخدم <div> و CSS Grid/Flexbox بدلاً من ذلك.

جدول الوسوم

الوسمالوظيفة
<form>نموذج
<input>حقل إدخال
<label>تسمية
<select>قائمة منسدلة
<option>خيار
<textarea>منطقة نص
<button>زر
<fieldset>مجموعة
<legend>عنوان المجموعة
<table>جدول
<tr>صف
<th>خلية رأس
<td>خلية

قائمة تحقق نهائية

المهمةالحالة
بناء نموذج تسجيل دخول⬜
استخدام أنواع input المختلفة⬜
استخدام select و textarea⬜
إضافة التحقق (validation)⬜
بناء جدول بيانات⬜
دمج الخلايا (colspan, rowspan)⬜
حل التمارين الثمانية⬜

ماذا بعد هذا المقال؟

الآن بعد أن أتقنت النماذج والجداول، أنت جاهز للمقال التالي:

  1. الوسوم الدلالية — HTML احترافي.
  2. CSS — التصميم والأنماط.
  3. مشروع متكامل — موقع كامل.

الخلاصة

في هذا المقال، تعلمت:

  • ✅ إنشاء النماذج (forms).
  • ✅ جميع أنواع input.
  • ✅ القوائم المنسدلة (select).
  • ✅ مناطق النص (textarea).
  • ✅ التحقق من الإدخال.
  • ✅ الجداول (tables).
  • ✅ دمج الخلايا (colspan, rowspan).
  • ✅ حل 8 تمارين عملية.

تذكر: النماذج والجداول هما أدوات أساسية لأي موقع تفاعلي.

#HTML#النماذج#الجداول#Forms#Tables#تصميم ويب#مبتدئين#تمارين
← المقال السابق

الصور والروابط في HTML — دليل شامل 2026

المقال التالي →

الوسوم الدلالية في HTML — دليل شامل Semantic HTML 2026

🎨 العودة إلى تعلّم HTML & CSS

📚 مقالات ذات صلة

HTML & CSS

مشروع متكامل — موقع شخصي بـ HTML و CSS 2026

مشروع عملي شامل لبناء موقع شخصي متكامل بـ HTML و CSS — مع الأقسام، التصميم المتجاوب، والحركات

HTML & CSS

Flexbox و CSS Grid — دليل شامل التخطيط الحديث 2026

دليل عملي مفصل لـ Flexbox و CSS Grid — التخطيط المرن والشبكي، مع تمارين وحلول

HTML & CSS

الألوان و Box Model في CSS — دليل شامل 2026

دليل عملي مفصل للألوان و Box Model في CSS — أنظمة الألوان، Padding، Margin، Border، مع تمارين وحلول