<form>: عنصر FORM
آخر تحديث: 2026-10-13
<form>عنصر FORM
عنصر <form> هو حاوية جمع بيانات المستخدم وإرسالها. يغلف عناصر التحكم (<input> و<select> و<textarea>...)، مع action لرابط الإرسال وmethod لطريقة HTTP.
| الفئة | النماذج |
|---|---|
| نموذج المحتوى | محتوى تدفقي (بدون <form> متداخل) |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </form> وسم |
| الحالة | قياسي |
📝 البنية
<form action="رابط-الإرسال" method="post">
عناصر التحكم
<input type="submit" value="إرسال">
</form>⚙️ السمات
يدعم هذا العنصر السمات العامة بالإضافة إلى ما يلي:
| السمة | القيمة | الوصف |
|---|---|---|
action | URL | The URL where form data is submitted. الافتراضي: |
method | Keyword | The HTTP method used to submit.
|
name | Text | Form name for JavaScript reference. |
autocomplete | Keyword | Whether browser autofill is enabled.
|
novalidate | Boolean | Skip HTML5 form validation on submit. |
target | Keyword | Where to display the submission result. الافتراضي: |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <form> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： اقرن عناصر التحكم بـ <label> لإمكانية وصول أفضل ومنطقة نقر أكبر.
❓ الأسئلة الشائعة
Qأيهما تختار لـ method: get أم post؟
AGET يلحم البيانات على URL — قابل للإضافة للمفضلة ومحدود الطول — ويناسب البحث والتصفية والعمليات القرائية فقط؛ بينما POST يضع البيانات في جسم الطلب ويناسب التسجيل وتسجيل الدخول والدفع وسائر العمليات المعدِّلة للبيانات. وكلمات المرور والمعلومات الحساسة POST بلا استثناء.
Qهل يجب أن يضم form زر submit؟
Aليس بالضرورة. فالضغط على Enter يرسل في معظم المتصفحات نموذجًا بحقل واحد؛ ويمكن استدعاء
form.requestSubmit() أو form.submit() عبر JS. لكن من أجل الاستخدام والوصولية يظل زر الإرسال الصريح أفضل الممارسات.Qهل يمكن إغفال سمة action؟
Aنعم، وإغفالها يرسل إلى عنوان URL للصفحة الحالية (سلوك HTML5). وفي تطبيقات الصفحة الواحدة يصاحب form غالبًا
preventDefault() لاعتراض الإرسال الافتراضي وإرسال البيانات بـ fetch — فالاعتراض ينجح سواء كُتبت action أم لا.🏷️ وسوم ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
