20 – عناصر النموذج < form > – النماذج (Forms) – المستوى الثاني متوسط
📌 النماذج (Forms) في HTML
🔹 ما هو الوسم <form>؟
-
<form> هو الوعاء الرئيسي اللي بيحتوي على عناصر الإدخال (Input Elements) زي:
-
مربعات النصوص (Text fields).
-
أزرار الاختيار (Radio Buttons).
-
مربعات التحديد (Checkboxes).
-
القوائم المنسدلة (Dropdowns).
-
أزرار الإرسال (Submit Buttons).
-
-
الهدف منه: جمع بيانات المستخدم وإرسالها إلى الخادم (Server).
🔹 التركيب الأساسي
🔹 الخصائص الأساسية لوسم <form>
1. action
-
يحدد الوجهة اللي هتتبعت ليها البيانات (صفحة/سيرفر/ملف).
-
مثال:
2. method
-
يحدد طريقة إرسال البيانات:
| القيمة | المعنى |
|---|---|
| get | بيظهر البيانات في شريط العنوان (URL)، مناسب للبحث أو الروابط القابلة للمشاركة. |
| post | البيانات بتتبعت في الخلفية، أكثر أمانًا ومناسب للبيانات الحساسة (كلمة مرور، تسجيل). |
✅ مثال:
3. name
-
اسم النموذج (مفيد في التعامل مع JavaScript).
4. target
-
يحدد مكان فتح صفحة النتيجة بعد إرسال البيانات.
-
نفس قيم target الخاصة بالروابط <a>:
-
_self (افتراضي) = نفس الصفحة.
-
_blank = نافذة/تبويب جديد.
-
5. autocomplete
-
يحدد هل المتصفح يقترح بيانات محفوظة (زي البريد وكلمة المرور).
-
القيم: on (افتراضي) – off.
6. novalidate
-
يمنع التحقق التلقائي (Validation) اللي المتصفح بيعمله قبل الإرسال.
🔹 مثال عملي على نموذج بسيط
🔎 النتيجة: نموذج تسجيل دخول بسيط فيه اسم مستخدم وكلمة مرور وزر إرسال.
🔹 ملخص
-
<form> = العنصر الرئيسي للنماذج.
-
action = يحدد مكان إرسال البيانات.
-
method = يحدد طريقة الإرسال (GET/POST).
-
خصائص إضافية: name, target, autocomplete, novalidate.
-
جواه بيكون كل عناصر الإدخال زي <input>, <textarea>, <select>, <button>…
Call now
Contact WhatsApp
