الدرس العاشر: النماذج في HTML

مقدمة

النماذج تُعد جزءًا أساسيًا في بناء تطبيقات الويب التفاعلية، حيث تتيح للمستخدمين إدخال البيانات وإرسالها إلى الخادم. تُستخدم النماذج لجمع معلومات مثل الأسماء، العناوين، التعليقات، والمزيد. في HTML، يتم إنشاء النماذج باستخدام عنصر <form>، والذي يحتوي على مجموعة من عناصر النموذج مثل <input>, <textarea>, و <button>. في هذا الدرس، سنتناول كيفية إنشاء النماذج، شرح عناصر النموذج الأساسية، وسنتعرف على الفرق بين طريقتي الإرسال GET و POST.

كيفية إنشاء نماذج باستخدام <form>

العنصر <form> يُستخدم لتجميع عناصر النموذج وتحديد كيفية إرسال البيانات إلى الخادم. يتم تحديد الإجراء الذي يجب اتخاذه عند إرسال النموذج باستخدام السمات action و method.

بنية نموذج بسيط

<form action="/submit" 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="message">الرسالة:</label>
  <textarea id="message" name="message" rows="4" required></textarea>
  
  <button type="submit">إرسال</button>
</form>

في هذا المثال:

• <form>: يُمثل العنصر الذي يحتوي على النموذج.
  • action: يُحدد عنوان URL حيث سيتم إرسال البيانات عند إرسال النموذج.
  • method: يُحدد طريقة إرسال البيانات (GET أو POST).

شرح عناصر النموذج

عنصر <input>

عنصر <input> يُستخدم لجمع أنواع مختلفة من البيانات من المستخدمين. يمكن تخصيص نوع الإدخال باستخدام خاصية type.

مثال على أنواع مختلفة من <input>

<input type="text" name="username" placeholder="اسم المستخدم">
<input type="password" name="password" placeholder="كلمة المرور">
<input type="checkbox" name="subscribe" value="yes"> الاشتراك في النشرة الإخبارية
<input type="radio" name="gender" value="male"> ذكر
<input type="radio" name="gender" value="female"> أنثى
<input type="date" name="birthdate">

عنصر <textarea>

عنصر <textarea> يُستخدم لجمع نصوص أطول من المستخدمين. يمكن تحديد حجم منطقة النص باستخدام سمات rows و cols.

مثال على <textarea>

<textarea name="comment" rows="4" cols="50" placeholder="أضف تعليقك هنا..."></textarea>

عنصر <button>

عنصر <button> يُستخدم لإنشاء أزرار يمكن تفعيلها عند الضغط عليها. يمكن تحديد نوع الزر باستخدام خاصية type.

مثال على <button>

<button type="submit">إرسال</button>
<button type="reset">إعادة تعيين</button>
<button type="button" onclick="alert('زر عادي')">زر عادي</button>

الفرق بين GET و POST

عند إرسال نموذج، يمكنك استخدام طريقتين مختلفتين لإرسال البيانات: GET و POST. كل منهما له خصائص واستخدامات مختلفة.

GET

• الخصائص:
  • البيانات تُرسل كجزء من عنوان URL.
  • يتم تضمين البيانات في سلسلة الاستعلام (query string).
  • يُستخدم عادة للحصول على البيانات من الخادم.
• الميزات:
  • يمكن أن يُحفظ في سجل المتصفح والمفضلات.
  • البيانات مرئية في شريط العنوان.
  • حجم البيانات محدود (عادةً ما يكون حوالي 2048 حرفًا).

مثال على استخدام GET

<form action="/search" method="get">
  <label for="query">بحث:</label>
  <input type="text" id="query" name="query">
  <button type="submit">بحث</button>
</form>

POST

• الخصائص:
  • البيانات تُرسل في جسم الطلب (request body) وليس كجزء من URL.
  • يُستخدم عادة لإرسال البيانات إلى الخادم (مثل إرسال بيانات تسجيل).
• الميزات:
  • لا يتم عرض البيانات في شريط العنوان.
  • حجم البيانات غير محدود.
  • أكثر أمانًا عند التعامل مع بيانات حساسة.

مثال على استخدام POST

<form action="/submit" method="post">
  <label for="username">اسم المستخدم:</label>
  <input type="text" id="username" name="username">
  
  <label for="password">كلمة المرور:</label>
  <input type="password" id="password" name="password">
  
  <button type="submit">تسجيل الدخول</button>
</form>

نصائح لإنشاء نماذج فعّالة

1. التحقق من صحة البيانات: استخدم خصائص مثل required, pattern, و minlength للتأكد من صحة البيانات المدخلة قبل إرسال النموذج.
2. توفير رسائل خطأ واضحة: استخدم الرسائل التوضيحية لمساعدة المستخدمين على تصحيح الأخطاء في إدخال البيانات.
3. تحسين تجربة المستخدم: أضف عناصر تفاعلية مثل أزرار التبديل أو قوائم منسدلة لتحسين تجربة الإدخال.

الخاتمة

في هذا الدرس، استعرضنا كيفية إنشاء النماذج في HTML باستخدام <form>, <input>, <textarea>, و <button>. كما قمنا بتوضيح الفرق بين طريقتي الإرسال GET و POST وأين يُفضل استخدام كل منهما. في الدرس القادم، سنستعرض كيفية استخدام الوسوم الأخرى في HTML مثل <iframe>, <embed>, و <object> لدمج محتوى خارجي في صفحات الويب.