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

في وحدة سابقة، تعلّمت كيفية استخدام العنصر <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">، لإنشاء زر إرسال رسومي. بعد أن أصبح بإمكانك إنشاء أزرار رسومية باستخدام CSS، لا يُنصح باستخدام type="image".

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

استخدِم <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 للنموذج
• أفضل الممارسات المتعلّقة بأزرار الإرسال