تعلم الفورم (النماذج) في HTML بسهولة — مقال شامل للمبتدئين

1) ما هو الفورم (Form) ولماذا نستخدمه؟

الفورم هو جزء من صفحة الويب يسمح للمستخدمين بإدخال بيانات (كالاسم، البريد الإلكتروني، تعليق، أو طلب شراء) ثم إرسالها للموقع لمعالجتها. العنصر الرئيسي في HTML هو <form> والذي يحتوي على عناصر إدخال أخرى.

2) الهيكل الأساسي لفورم بسيط

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

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

تفسير سريع:

• action: يحدد إلى أين تُرسل البيانات بعد الضغط على زر الإرسال.
• method: غالبًا تكون GET أو POST.
• required: يجبر المستخدم على تعبئة الحقل قبل الإرسال.

3) أهم عناصر الفورم

• <label>: يربط وصف الحقل بالـ input ليسهل على المستخدم معرفة المطلوب.
• <input>: أكثر العناصر استخدامًا، وله أنواع عديدة مثل text, email, password, number.
• <textarea>: حقل نص متعدد الأسطر لكتابة رسائل أو تعليقات طويلة.
• <select> و<option>: لإنشاء قائمة منسدلة.
• <button>: زر الإرسال أو تنفيذ حدث معين.

4) أمثلة على أنواع input

<input type="text" name="username" placeholder="اسم المستخدم">
<input type="email" name="email" placeholder="example@mail.com">
<input type="password" name="pwd" placeholder="كلمة المرور">
<input type="number" name="age" min="1" max="120">
<input type="checkbox" name="subscribe" value="yes"> اشترك بالنشرة

اختيار النوع الصحيح يقلل أخطاء الإدخال ويسهل على المستخدم تعبئة البيانات.

5) التحقق من البيانات (Validation)

• التحقق من جهة العميل: باستخدام سمات مثل required وpattern. يظهر المتصفح رسائل فورية للمستخدم.
• التحقق من جهة السيرفر: مهم جدًا — لا تعتمد على التحقق في المتصفح فقط. السيرفر يعيد فحص البيانات بعد وصولها ويمنع تخزين بيانات خاطئة أو ضارة.

مثال على pattern:

<input type="text" name="phone" pattern="^\d{10}$" placeholder="رقم مكون من 10 أرقام">

مثال مبسط لفهم التحقق من السيرفر:

تخيلي أن لديك موقع يطلب من الزائر إدخال عمره:

• في المتصفح: كود JavaScript يمنع إدخال أقل من 18 سنة. لكن يمكن التلاعب به وإرسال أي قيمة.
• في السيرفر: يتم فحص العمر مرة أخرى. إذا كان أقل من 18، يرفض الطلب ويرسل رسالة خطأ. هذا يحمي الموقع من التلاعب.

6) تجربة المستخدم والنصائح

• اربط كل input بـ label ليسهل استخدامه على جميع المستخدمين.
• اجعل الفورم بسيطًا وقليل الحقول لزيادة نسبة الإكمال.
• أضف رسالة نجاح أو خطأ بعد الإرسال ليعرف المستخدم النتيجة.

7) إرسال البيانات

• GET: تُرسل البيانات في رابط الصفحة (مناسب للبحث والفلاتر).
• POST: تُرسل البيانات في الطلب (أفضل للمعلومات الحساسة مثل تسجيل الدخول).

8) مثال كامل: نموذج تواصل

<form action="/contact" method="POST">
  <label for="name">الاسم الكامل</label>
  <input id="name" name="name" type="text" required>

  <label for="email">البريد الإلكتروني</label>
  <input id="email" name="email" type="email" required>

  <label for="message">الرسالة</label>
  <textarea id="message" name="message" rows="6" required></textarea>

  <button type="submit">أرسل رسالة</button>
</form>

9) تنسيق الفورم (CSS) بشكل بسيط

استخدم CSS لإضافة مسافات بين الحقول وتوضيح زر الإرسال:

form {
  max-width: 400px;
  margin: auto;
}
input, textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
}
button {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}
button:hover {
  background-color: #45a049;
}

10) شاهد الفيديو العملي

لشرح عملي وتطبيقي على الفورم، شاهد هذا الفيديو: اضغط هنا لمشاهدة الفيديو