استخدام النماذج للحصول على البيانات من المستخدمين

تعرَّف على أساسيات استخدام نموذج على الويب من خلال هذه المقدمة حول عنصر النموذج.

لنفترض أنّك تريد أن تسأل المستخدمين على موقعك الإلكتروني عن حيوانهم المفضّل. كخطوة أولى، تحتاج إلى طريقة لجمع البيانات.

في HTML، يمكنك إنشاء ذلك باستخدام عنصر النموذج (<form>) و<input> مع <label> وزر إرسال <button>.

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

ما هو عنصر النموذج؟

يتألف عنصر النموذج من علامة البداية <form>، والسمات الاختيارية المحددة في علامة البداية، وعلامة النهاية </form>.

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

أين تتم معالجة البيانات؟

عند إرسال نموذج (على سبيل المثال، عندما ينقر المستخدم على الزر إرسال)، يرسل المتصفّح طلبًا. يمكن للبرنامج النصي الاستجابة لهذا الطلب ومعالجة البيانات.

يتمّ إرسال الطلب تلقائيًا إلى الصفحة التي يظهر فيها النموذج.

لنفترض أنّك تريد تشغيل نص برمجي في https://web.dev لمعالجة بيانات النموذج. كيف ستفعل ذلك؟ جرِّبها على CodePen.

      <form action="https://example.com/animals"></form>

يقدم المثال السابق طلبًا إلى https://example.com/animals. يمكن لنص برمجي على الخلفية في example.com التعامل مع الطلبات إلى /animals ومعالجة البيانات من النموذج.

كيف يتم نقل البيانات؟

يتمّ إرسال بيانات النموذج تلقائيًا كطلب GET، مع إلحاق البيانات المُرسَلة بعنوان URL. إذا أدخل المستخدم كلمة "ضفدع" في المثال السابق، سيرسل المتصفّح طلبًا إلى عنوان URL التالي:

https://example.com/animals?animal=frog

في هذه الحالة، يمكنك الوصول إلى البيانات في الواجهة الأمامية أو الخلفية من خلال الحصول على البيانات من عنوان URL.

يمكنك توجيه النموذج لاستخدام طلب POST من خلال تغيير سمة الطريقة.

<form method="post">
...
</form>

باستخدام POST، يتم تضمين البيانات في نص الطلب.

لن تظهر البيانات في عنوان URL، ولا يمكن الوصول إليها إلا من خلال نص برمجي للواجهة الأمامية أو الخلفية.

ما هي الطريقة التي يجب استخدامها؟

تتوفّر حالات استخدام لكلتا الطريقتين.

بالنسبة إلى النماذج التي تعالج البيانات الحساسة، استخدِم طريقة POST. يتم تشفير البيانات (في حال استخدام HTTPS)، ولا يمكن الوصول إليها إلا من خلال النص البرمجي للخادم الخلفي الذي يعالج الطلب. لا تظهر البيانات في عنوان URL. ومن الأمثلة الشائعة على ذلك نموذج تسجيل الدخول.

إذا كانت البيانات قابلة للمشاركة، يمكنك استخدام طريقة GET. بعد ذلك، تتم إضافة البيانات إلى سجلّ المتصفّح لأنّها مضمّنة في عنوان URL. وغالبًا ما تستخدم نماذج البحث هذه الطريقة. يتيح لك ذلك إضافة إشارة مرجعية إلى صفحة نتائج البحث.

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

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

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

الموارد

العنصر <form>