تعلم إنشاء النماذج (Forms) في HTML خطوة بخطوة

تعلم إنشاء النماذج (Forms) في HTML خطوة بخطوة

في هذا الدرس، سنتعرف معًا على طريقة إنشاء النماذج أو ما يُعرف بالـ Forms في لغة HTML، والتي تُستخدم بشكل أساسي لجمع بيانات المستخدمين وإرسالها إلى الخادم (السيرفر) للمعالجة.

ما هي النماذج (Forms)؟

النموذج هو عبارة عن استمارة يتم إدراجها داخل صفحة ويب لجمع بيانات من الزائر. مثلًا، عند التقديم على وظيفة، يُطلب منك ملء نموذج يحتوي على اسمك، عنوانك، بريدك الإلكتروني، رقم هاتفك، وغيرها من المعلومات. نفس الفكرة تنطبق على النماذج في HTML، حيث يمكن من خلالها إدخال البيانات داخل الموقع لإرسالها لاحقًا.

أمثلة على استخدام النماذج

نجد النماذج في معظم المواقع المعروفة مثل:

• فيسبوك: نموذج تسجيل الدخول.

• يوتيوب: نموذج التعليق أو إنشاء قناة.

• إنستغرام: نموذج إنشاء حساب جديد.

كيفية إنشاء نموذج في HTML

لبدء إنشاء نموذج، نستخدم الوسم <form>. وهو العنصر الأساسي الذي يحتوي جميع حقول الإدخال المختلفة. هذا الوسم يمكنه أيضًا أن يحتوي على أي عنصر HTML آخر مثل العناوين <h1>، الفقرات <p>، الصور، والنصوص.

مثال على إنشاء نموذج بسيط:

<form>
  <!-- عناصر الإدخال ستُضاف هنا -->
</form>

إدخال البيانات باستخدام <input>

لإضافة حقل لإدخال البيانات، نستخدم الوسم <input>. هذا الوسم لا يحتاج إلى وسم إغلاق، ويُكتب كالتالي:

<input>

خصائص <input>

الوسم <input> يمكن تخصيصه باستخدام خصائص (Attributes) مثل:

• type: لتحديد نوع الحقل (نص، رقم، بريد إلكتروني، كلمة مرور...).

• id: لإعطاء تعريف فريد لكل حقل.

• value: لتحديد قيمة افتراضية.

• placeholder: لتحديد نص إرشادي داخل الحقل.

• required: لجعل إدخال الحقل إجباري قبل الإرسال.

أمثلة عملية:

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

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

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

شرح الوسوم المستخدمة:

<label>

يُستخدم لتسمية الحقل وتوضيح الهدف منه، ويتم ربطه مع الحقل باستخدام الخاصية for والتي يجب أن تطابق قيمة id للحقل.

مثال:

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

عند الضغط على النص داخل وسم <label> يتم تفعيل حقل الإدخال المرتبط به تلقائيًا.

التحكم في أنواع الإدخال

يمكنك تحديد نوع الإدخال من خلال الخاصية type. بعض القيم الشائعة:

• text: نص عادي

• number: أرقام فقط

• password: كلمة مرور

• email: بريد إلكتروني

• submit: زر إرسال

• reset: زر إعادة تعيين الحقول

مثال على نوع "number" مع خصائص إضافية:

<input type="number" min="5" max="20" step="5" value="10">

• min: أقل قيمة يمكن إدخالها

• max: أعلى قيمة مسموح بها

• step: مقدار الزيادة أو النقص عند استخدام الأسهم

• value: القيمة الافتراضية التي تظهر داخل الحقل

إضافة زر الإرسال (Submit)

زر الإرسال يُستخدم لإرسال البيانات المكتوبة داخل النموذج، ويُكتب بهذا الشكل:

<input type="submit" value="إرسال">

عند الضغط عليه، يتم إرسال البيانات إلى العنوان المحدد في خاصية action داخل وسم <form> (سنقوم بشرحها لاحقًا).

إضافة زر إعادة تعيين (Reset)

زر إعادة التعيين يُستخدم لمسح جميع البيانات داخل النموذج والعودة للقيم الافتراضية.

<input type="reset" value="مسح الكل">

الفرق بين value و placeholder

• value: تظهر كقيمة فعلية داخل الحقل، ويمكن تعديلها.

• placeholder: تظهر كنص رمادي خفيف داخل الحقل، وتختفي بمجرد أن يبدأ المستخدم في الكتابة.

مثال توضيحي:

<input type="text" value="أحمد">
<input type="text" placeholder="اكتب اسمك هنا">

جعل الحقول إلزامية

لمنع المستخدم من إرسال النموذج دون ملء الحقول المهمة، نستخدم الخاصية required.

<input type="text" placeholder="اسم المستخدم" required>

إذا حاول الزائر الضغط على زر "إرسال" دون إدخال بيانات في هذا الحقل، ستظهر له رسالة تنبيه.

---

خلاصة الدرس

في هذا الدرس، تعرفنا على كيفية إنشاء نموذج بسيط باستخدام HTML. وتعلمنا العناصر التالية:

• وسم <form> لإنشاء النموذج.

• وسم <input> لإدخال البيانات.

• وسم <label> لتسمية الحقول وربطها بها.

• أنواع type المختلفة لحقل الإدخال.

• استخدام الخصائص value, placeholder, required, min, max, step.

• إضافة زر الإرسال (submit) وزر إعادة التعيين (reset).

هذا كان الجزء الأول من شرح النماذج في HTML، وسنستكمل باقي العناصر الأكثر تقدمًا مثل checkbox, radio buttons, وselect menus في الدروس القادمة إن شاء الله.