يمكنك التعرّف على أساسيات استخدام نموذج على الويب من خلال هذه المقدّمة حول عنصر النموذج.
لنفترض أنّك تريد أن تسأل المستخدمين على موقعك الإلكتروني عن حيوانهم المفضّل. كخطوة أولى، تحتاج إلى طريقة لجمع البيانات.
كيف تفعل ذلك باستخدام HTML؟
في 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
لمعالجة بيانات النموذج، كيف يمكنك تنفيذ ذلك؟
جرِّبه الآن!
يمكنك اختيار موقع النص البرمجي باستخدام السمة action.
<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><form>.<form-container><form><form-element>ما هي السمة التي يمكنك استخدامها لتحديد مكان معالجة <form>؟
whereactionaction مكان معالجة <form>.hrefurlما هي طريقة الطلب التلقائية؟
GETPOST