النماذج في HTML: الحقول والأزرار والتحقق

إلى البرنامج على الخادم الذي في action ، مثل PHP أو Node.js. HTML وحدها لا تحفظ البيانات.

كلاهما يرسل النموذج، لكن <button> يقبل محتوى مثل أيقونة ونص، فهو أكثر مرونة.

النماذج هي الطريقة التي يرسل بها الزائر بيانات: تسجيل دخول، أو بحث، أو تواصل، أو طلب شراء.

نموذج بسيط

جرّب بنفسكعدّل الكود ثم اضغط تشغيل

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

<label for="q"> مرتبط بالحقل الذي له id="q". عندما تضغط على النص يركز المؤشر في الحقل، وقارئات الشاشة تقرأ اسمه. كل حقل يحتاج label.

جرّب بنفسكعدّل الكود ثم اضغط تشغيل

على الهاتف، type="email" يعرض لوحة مفاتيح فيها @، وtype="number" لوحة أرقام. اختيار النوع الصحيح يحسن التجربة كثيرًا.

جرّب بنفسكعدّل الكود ثم اضغط تشغيل

المتصفح يتحقق قبل الإرسال دون أي JavaScript:

الخاصية	ماذا تفعل
`required`	الحقل إجباري
`minlength` و`maxlength`	طول النص
`min` و`max`	حدود الأرقام والتواريخ
`pattern`	نمط معين، مثل `pattern="[0-9]{10}"` لعشرة أرقام
`type="email"`	يتحقق من شكل البريد

أين تذهب البيانات؟

إلى البرنامج على الخادم الذي في action، مثل PHP أو Node.js. HTML وحدها لا تحفظ البيانات.

ما الفرق بين button وinput type="submit"؟

كلاهما يرسل النموذج، لكن <button> يقبل محتوى مثل أيقونة ونص، فهو أكثر مرونة.