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

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

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

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

ومع ذلك، في معظم الحالات، عند تخزين أو معالجة البيانات من المستخدمين، عليك استخدام العنصر <form>. كما ستتعلم في هذه الوحدة، يمنحك استخدام <form> الكثير من الوظائف المضمنة من المتصفحات التي كان عليك إنشاؤها بنفسك. يتضمّن <form> أيضًا العديد من ميزات تسهيل الاستخدام المضمَّنة تلقائيًا. إذا كنت تريد تجنُّب إعادة تحميل الصفحة عندما يرسل المستخدم نموذجًا، لا يزال بإمكانك استخدام العنصر <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. مزيد من المعلومات حول أنواع الطلبات ونقل بيانات النماذج.

عند إرسال النموذج، يرسل المتصفّح طلبًا إلى عنوان 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">.

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

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

يمكنك استخدام <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.

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

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

الموارد

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