الرئيسية | HTML | CSS

النماذج في HTML: شرح form و input و label و button للمبتدئين

بعد التعرف على الوسوم الدلالية مثل div و section و article، نصل الآن إلى عنصر مهم جدًا في المواقع التفاعلية، وهو النماذج أو Forms. تُستخدم النماذج لجمع البيانات من المستخدمين، مثل تسجيل الدخول، إنشاء حساب، أو إرسال رسالة. في هذا الدرس سنتعرف على كيفية إنشاء نموذج في HTML وفهم أهم الوسوم الخاصة به.

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

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

وسم form

وسم form هو الحاوية الأساسية لأي نموذج. يحتوي على جميع عناصر الإدخال مثل الحقول والأزرار. يُستخدم مع خاصيتي action و method لتحديد مكان وطريقة إرسال البيانات.

وسم input وأنواعه

وسم input هو أكثر وسوم النماذج استخدامًا. يُستعمل لإنشاء حقول إدخال مختلفة مثل النص، البريد الإلكتروني، وكلمة المرور. نوع الحقل يُحدد بواسطة الخاصية type.

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

<input type="text">
<input type="email">
<input type="password">
<input type="number">

كل نوع من هذه الحقول يُستخدم لغرض مختلف ويساعد على تحسين تجربة المستخدم.

وسم label وأهميته

وسم label يُستخدم لكتابة تسمية للحقل. ربط label مع input يُحسن من سهولة الاستخدام ويساعد محركات البحث وقارئات الشاشة. يتم الربط باستخدام خاصية for.

مثال label مع input

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

وسم button

وسم button يُستخدم لإنشاء زر داخل النموذج. غالبًا ما يكون زر الإرسال Submit. عند الضغط عليه يتم إرسال البيانات الموجودة في النموذج.

مثال على نموذج HTML كامل

<form>
  <label for="name">الاسم</label>
  <input type="text" id="name">

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

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

هذا مثال بسيط لنموذج HTML يحتوي على حقول إدخال وزر إرسال. يمكن لاحقًا ربط هذا النموذج بلغة مثل PHP لمعالجة البيانات.

تنسيق النماذج باستخدام CSS

بشكل افتراضي تظهر النماذج بتصميم بسيط. لتحسين شكلها يتم استخدام CSS لتنسيق الحقول والأزرار. HTML تهتم بالهيكل، بينما CSS تهتم بالمظهر.

أخطاء شائعة عند إنشاء النماذج

من الأخطاء الشائعة نسيان وسم label، أو استخدام نوع input غير مناسب، أو عدم تنظيم النموذج بشكل واضح. تفادي هذه الأخطاء يجعل النموذج أسهل استخدامًا وأكثر احترافية.

مصادر إضافية لتعلم النماذج

للمزيد من التفاصيل يمكنك الرجوع إلى MDN Web Docs أو موقع W3Schools .

خلاصة

النماذج عنصر أساسي في HTML لجمع البيانات من المستخدمين. بفهم وسوم form و input و label و button ستكون قادرًا على إنشاء نماذج عملية والانتقال لاحقًا لمعالجة البيانات باستخدام لغات برمجة أخرى.

⬅️ العودة إلى الصفحة الرئيسية