نظرة تفصيلية على عنصر النموذج

في وحدة سابقة، تعرّفت على كيفية استخدام العنصر <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".

أخيرًا، تجنَّب إضافة مهلات. امنح المستخدمين الوقت الذي يحتاجون إليه لإرسال نموذج. تتسبّب المهلات في فقدان البيانات وإحباط المستخدمين. اطّلِع على إرشادات 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.

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

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

الموارد

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