<form>

وسم النموذج <form>

وسم form يجمع حقول الإدخال ويرسل بياناتها إلى الخادم عبر action وmethod — بوابة كل تفاعل مستخدم.

النموذج حاوية الحقول التي تُرسل معًا: تسجيل دخول، بحث، تواصل. عند الضغط على زر الإرسال، يجمع المتصفح قيم الحقول المسماة (name) ويرسلها إلى العنوان في action بالطريقة في method: القيمة get تضع البيانات في الرابط (للبحث والفلاتر)، وpost ترسلها في جسم الطلب (لكل ما هو حساس أو يغيّر بيانات).

هدية مجانية تُنسى كثيرًا: التحقق المدمج — required وtype="email" وminlength تمنع الإرسال الخاطئ قبل أي جافاسكريبت.

الصياغة

<form action="/submit" method="post">
  <!-- الحقول -->
  <button type="submit">إرسال</button>
</form>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<form onsubmit="alert('تم الإرسال!'); return false">
  <label>بريدك الإلكتروني:
    <input type="email" name="email" required placeholder="you@example.com">
  </label>
  <br><br>
  <button type="submit">اشترك</button>
</form>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
action	عنوان استقبال البيانات على الخادم
method	get للبحث والفلاتر (بيانات في الرابط) — post لما يغيّر بيانات أو حساس
autocomplete	تفعيل/تعطيل الملء التلقائي للنموذج كاملًا

💡 نصائح عملية

كل حقل يحتاج name — الحقول بلا name لا تُرسل أصلًا
التحقق المدمج (required, type, minlength) خط دفاع أول مجاني قبل الجافاسكريبت
زر داخل form هو submit افتراضيًّا — حدد type="button" للأزرار الجانبية

⚠️ أخطاء شائعة

إرسال بيانات حساسة بـ get — تظهر في الرابط وسجل المتصفح
نماذج متداخلة form داخل form — ممنوع في HTML
الاعتماد على التحقق الأمامي وحده — الخادم يجب أن يتحقق دائمًا

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs