عنصر النموذج المعمّق

في وحدة سابقة، تعلمت كيفية استخدام العنصر <form>. في هذه الوحدة، ستتعرّف على آلية عمل النموذج والحالات التي تستدعي استخدامه.

هل يجب استخدام عنصر <form>؟

Browser Support

• 1
• 12
• 1
• 1

Source

لا تحتاج دائمًا إلى وضع عناصر التحكّم في النماذج في عنصر <form>. على سبيل المثال، يمكنك تقديم عنصر <select> للمستخدمين لاختيار فئة منتج. لست بحاجة إلى عنصر <form> هنا، لأنّك لا تخزِّن البيانات أو تعالجها في الخلفية.

ومع ذلك، في معظم الحالات عند تخزين البيانات أو معالجتها من المستخدِمين، يجب استخدام العنصر <form>. كما ستتعرّف عليه في هذه الوحدة، يوفّر لك استخدام <form> الكثير من الوظائف المضمّنة من المتصفّحات التي كان عليك إنشاؤها بنفسك. تتضمّن أجهزة <form> أيضًا العديد من ميزات تسهيل الاستخدام المضمّنة تلقائيًا. إذا كنت تريد تجنُّب إعادة تحميل الصفحة عندما يُرسل أحد المستخدِمين نموذجًا، سيظل بإمكانك استخدام العنصر <form>، ولكن عليك تحسينه باستخدام JavaScript.

ملاحظة: من الممكن تكرار وظائف النموذج باستخدام JavaScript، ولكن من غير المرجّح أن يكون النهج المستنِد إلى النصوص البرمجية فقط قويًا وسهل الاستخدام ومناسبًا للمستقبل مثل <form> المضمّن. التعرّف على سبب عدم توفّر JavaScript لدى بعض المستخدمين

كيف تعمل <form>؟

لقد عرفت أنّ <form> هي أفضل طريقة لمعالجة بيانات المستخدمين. قد تتساءل الآن، كيف يعمل النموذج؟

<form> هو حاوية لعناصر التحكّم في النماذج التفاعلية.

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

كيف يتم إرسال النماذج؟

عند إرسال <form>، يتحقّق المتصفّح من سمات <form>. يتم إرسال البيانات كطلب GET أو POST وفقًا لسمة method. في حال عدم توفّر سمة method، يتم إرسال طلب GET إلى عنوان URL للصفحة الحالية.

كيف يمكنك الوصول إلى بيانات النموذج ومعالجتها؟ يمكن معالجة البيانات المرسَلة باستخدام JavaScript في الواجهة الأمامية باستخدام طلب GET، أو باستخدام رمز في الخلفية باستخدام طلب GET أو POST. اطّلِع على مزيد من المعلومات عن أنواع الطلبات ونقل بيانات النماذج.

ملاحظة: قد يتضمّن الزر إرسال سمة formmethod. في هذه الحالة، يتم استخدام القيمة المحدّدة هناك.

عند إرسال النموذج، يُرسِل المتصفّح طلبًا إلى عنوان URL الذي يمثّل قيمة السمة action. بالإضافة إلى ذلك، يتحقّق المتصفّح مما إذا كان الزر إرسال يحتوي على سمة formaction. في هذه الحالة، يتم استخدام عنوان URL المحدّد هناك.

بالإضافة إلى ذلك، يبحث المتصفّح عن سمات إضافية في عنصر <form>، على سبيل المثال، لتحديد ما إذا كان يجب التحقّق من صحة النموذج (novalidate) أو استخدام ميزة "الإكمال التلقائي" (autocomplete="off") أو ترميز البيانات (accept-charset).

جرِّب إنشاء نموذج يمكن للمستخدمين من خلاله إرسال اللون المفضّل لديهم. يجب إرسال البيانات كطلب POST، ويجب أن يكون عنوان URL الذي ستتم معالجة البيانات فيه هو /color.

عرض النموذج

أحد الحلول المحتملة هو استخدام هذا النموذج:

<form method="post" action="/color">
    <label for="color">What is your favorite color?</label>
    <input type="text" name="color" id="color">
    <button>Save</button>
</form>

التأكّد من أنّه يمكن للمستخدمين إرسال النموذج

هناك طريقتان لإرسال نموذج. يمكنك النقر على الزر إرسال أو الضغط على Enter أثناء استخدام أيّ عنصر تحكّم في النموذج.

ملاحظة: استخدِم اسمًا قابلاً للتنفيذ لزر إرسال، مثل "الانتقال إلى الدفع" أو "حفظ التغييرات"، بدلاً من "إرسال" فقط. لا توقِف زر إرسال أثناء انتظار إدخال المستخدم لبيانات صالحة، ولكن ننصحك بإيقافه بعد إرسال النموذج لمنع إرسال طلبات متعددة إلى خادمك. مزيد من المعلومات عن أفضل الممارسات المتعلّقة بزر الإرسال

يمكنك إضافة زر إرسال بعدة طرق. أحد الخيارات هو استخدام عنصر <button> داخل النموذج. طالما أنّك لا تستخدم type="button"، يعمل الزرّ كزر إرسال. يمكنك أيضًا استخدام <input type="submit" value="Submit">.

ملاحظة: يمكنك استخدام السمة enterkeyhint لتغيير تصنيف مفتاح Enter للوحات المفاتيح على الشاشة. يساعد ذلك المستخدمين على فهم ما يحدث عند إرسال النموذج الحالي.

الخيار الثالث هو استخدام <input type="image" alt="Submit" src="submit.png">، لإنشاء زر إرسال مرئي. ومع ذلك، بما أنّه يمكنك الآن إنشاء أزرار رسومية باستخدام CSS، لا يُنصح باستخدام type="image".

ملاحظة: امنح المستخدمين دائمًا الوقت الذي يحتاجونه لإرسال النموذج. سيؤدي تحديد مهلات في النموذج إلى فقدان البيانات وإزعاج المستخدمين. لمزيد من المعلومات، يُرجى الاطّلاع على إرشادات وقت الاستراحة في نماذج W3C.

السماح للمستخدمين بإرسال الملفات

استخدِم <input type="file"> لتفعيل إمكانية تحميل المستخدمين للملفات وإرسالها إذا لزم الأمر.

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

أولاً، أضِف عنصر <input> مع type="file" إلى النموذج. أضِف السمة multiple إذا كان يجب أن يتمكّن المستخدمون من تحميل ملفات متعددة.

هناك تغيير آخر مطلوب لضمان تمكّن المستخدمين من تحميل الملفات، وهو ضبط السمة enctype في النموذج. تكون القيمة التلقائية application/x-www-form-urlencoded.

<form method="post" enctype="multipart/form-data">
…
</form>

للتأكّد من إمكانية إرسال الملفات، غيِّر هذا الإعداد إلى multipart/form-data. بدون هذا الترميز، لا يمكن إرسال الملفات باستخدام طلب POST.

التحقّق من فهمك

اختبِر معلوماتك حول عنصر النموذج

ما هي القيمة المطلوبة لـ enctype لإرسال الملفات؟

multipart/form-data

🎉

multipart/form-files

يُرجى إعادة المحاولة.

form-data

يُرجى إعادة المحاولة.

form-files

يُرجى إعادة المحاولة.

هل من الممكن إرسال بيانات المستخدمين بدون <form>

لا

يُرجى إعادة المحاولة.

نعم، باستخدام JavaScript.

🎉

نعم، باستخدام Flash.

يُرجى إعادة المحاولة.

نعم، باستخدام HTML5.

يُرجى إعادة المحاولة.

كيف يمكنك إرسال <form>؟

انقر على <button>.

يُرجى إعادة المحاولة.

اضغط على المفتاح Enter.

يُرجى إعادة المحاولة.

انقر على <input type="image">.

يُرجى إعادة المحاولة.

كل ما سبق

🎉

الموارد

• عنصر HTML للنموذج
• أفضل الممارسات المتعلّقة بزر الإرسال