10 الفصل الرابع: الجداول والنماذج

تمام! هنتعلم في الفصل الرابع عن النماذج (Forms)، وهنبدأ أولًا مع وسم <form> وحقول الإدخال <input>، بالإضافة للأزرار والقوائم المنسدلة.

الفصل الرابع: الجداول والنماذج

2. النماذج (Forms)

النماذج تُستخدم في HTML للحصول على مدخلات من المستخدمين مثل الاسم، العمر، العنوان، وغيرها. بواسطتها يمكن إرسال البيانات إلى الخادم لمعالجتها باستخدام تقنيات مثل PHP أو JavaScript أو حتى تخزينها في قواعد البيانات.

2.1. وسم <form> وحقول الإدخال <input>

وسم <form>:

• يُستخدم لتحديد النموذج في صفحة HTML.
• يُستخدم لإرسال البيانات إلى الخادم (server) لمعالجتها.

الخصائص الرئيسية لوسم <form>:

• action: يحدد عنوان URL الذي سترسل إليه البيانات عند إرسال النموذج.
• method: يحدد طريقة إرسال البيانات (GET أو POST).
• name: يحدد اسم النموذج.

مثال:

<form action="/submit_form" 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>
  
  <input type="submit" value="إرسال">
</form>

• action="/submit_form": يحدد أن البيانات ستُرسل إلى المسار /submit_form في الخادم.
• method="POST": تُرسل البيانات باستخدام طريقة POST.

حقول الإدخال <input>:

الوسم <input> يُستخدم لإدخال البيانات من قبل المستخدم. يتم تحديد نوع البيانات التي يجب إدخالها باستخدام خاصية type.

أنواع حقول الإدخال:

• type="text": حقل نصي.
• type="email": حقل لعنوان البريد الإلكتروني.
• type="password": حقل لكتابة كلمة المرور.
• type="radio": حقل لاختيار واحد من عدة خيارات.
• type="checkbox": حقل لاختيار أكثر من خيار.
• type="submit": زر لإرسال البيانات.

مثال مع أنواع مختلفة من الحقول:

<form action="/submit_form" 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="gender">الجنس:</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">ذكر</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">أنثى</label>
  
  <label for="newsletter">الاشتراك في النشرة الإخبارية:</label>
  <input type="checkbox" id="newsletter" name="newsletter" value="yes">
  
  <input type="submit" value="إرسال">
</form>

في المثال ده:

• <input type="radio">: يتيح للمستخدم اختيار جنس واحد.
• <input type="checkbox">: يتيح للمستخدم اختيار الاشتراك في النشرة الإخبارية.
• <input type="submit">: يُستخدم لإرسال النموذج.

2.2. الأزرار (Buttons)

في HTML، يمكن إضافة الأزرار باستخدام الوسم <button>، والذي يمكن استخدامه لتنفيذ أوامر مثل إرسال النموذج، إعادة تعيينه، أو أي وظيفة أخرى باستخدام JavaScript.

أنواع الأزرار:

• <button type="submit">: زر إرسال النموذج.
• <button type="reset">: زر لإعادة تعيين النموذج (إلغاء المدخلات).
• <button type="button">: زر عادي يمكن ربطه بأي وظيفة JavaScript.

مثال للأزرار:

<form action="/submit_form" method="POST">
  <label for="name">الاسم:</label>
  <input type="text" id="name" name="name" required>
  
  <button type="submit">إرسال</button>
  <button type="reset">إعادة تعيين</button>
</form>

في المثال ده:

• <button type="submit">: زر إرسال البيانات.
• <button type="reset">: زر إعادة تعيين الحقول.

2.3. القوائم المنسدلة (Drop-down Lists)

في HTML، يتم إنشاء القوائم المنسدلة باستخدام الوسم <select> ووسم <option>. يمكن استخدامه لتمكين المستخدم من اختيار قيمة من قائمة من الخيارات.

الخصائص الرئيسية:

• <select>: لإنشاء القائمة المنسدلة.
• <option>: لتعريف كل خيار داخل القائمة.

مثال لإنشاء قائمة منسدلة:

<form action="/submit_form" method="POST">
  <label for="city">اختر المدينة:</label>
  <select id="city" name="city">
    <option value="cairo">القاهرة</option>
    <option value="alexandria">الإسكندرية</option>
    <option value="mansoura">المنصورة</option>
  </select>
  
  <input type="submit" value="إرسال">
</form>

في المثال ده:

• <select>: يستخدم لإنشاء القائمة المنسدلة.
• <option>: يستخدم لتحديد كل خيار من الخيارات داخل القائمة.

2.4. خصائص إضافية للنماذج

• required: لتحديد أن الحقل مطلوب.
• placeholder: لتحديد نص افتراضي يظهر داخل الحقل.
• value: لتحديد القيمة الافتراضية للحقل.
• autocomplete: لتفعيل أو تعطيل الإكمال التلقائي للنموذج.

مثال لاستخدام الخصائص الإضافية:

<form action="/submit_form" method="POST">
  <label for="name">الاسم:</label>
  <input type="text" id="name" name="name" required placeholder="أدخل اسمك هنا">
  
  <label for="email">البريد الإلكتروني:</label>
  <input type="email" id="email" name="email" required placeholder="أدخل بريدك الإلكتروني">
  
  <input type="submit" value="إرسال">
</form>

في المثال ده:

• required: يضمن أن الحقول يجب أن تكون ممتلئة.
• placeholder: يعرض نصًا توجيهيًا داخل الحقل.

ملخص الفصل الرابع – الجزء الثاني: النماذج

• وسم <form>: يُستخدم لإنشاء النموذج وتحديد كيفية إرسال البيانات.
• الحقول (<input>): تُستخدم لتحديد أنواع مختلفة من المدخلات مثل النصوص، الأرقام، البريد الإلكتروني، وكلمات المرور.
• الأزرار (<button>): تُستخدم لتنفيذ العمليات مثل إرسال النموذج أو إعادة تعيينه.
• القوائم المنسدلة (<select> و <option>): تُستخدم لتمكين المستخدم من اختيار قيمة من مجموعة خيارات.
• الخصائص الإضافية: مثل required و placeholder لتحسين تفاعل المستخدم مع النموذج.

لو عندك أي أسئلة أو محتاج تشرح حاجة تانية عن النماذج، أنا هنا علشان أساعدك! 😄